title: Full width background inside a div
body: <p>So, i have:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
  
      &lt;div class="full-width"&gt;
          &lt;div class="header"&gt;
              &lt;a href=""&gt;
                  &lt;img src="img/logo.png" alt="Logo" class="logo img-responsive" /&gt;
              &lt;/a&gt;
              &lt;nav&gt;
                  &lt;ul class="nav nav-pills"&gt;
                      &lt;li&gt;&lt;a href=""&gt;Moden Web Design&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Prices&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Demonstration&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>inside a <code>&lt;div class="wrapper"&gt;</code>, that has the <code>width:1100px;</code>. So the question is if i can somehow make the <code>div class="full-width"</code> with a full width background... Because it stops at the <code>.wrapper</code>'s margins.</p>
  
  <p>I tried this method, but it doesn't work:</p>
  
  <pre><code>.full-width {
      height:50px;
      position:absolute;
      width:100%;
      z-index:100;
  }
  </code></pre>