title: HTML - Make Child Element Ignore Parent Div's Padding
body: <p>I've got a header div inside of a container div, and the header has a different background color than the container div.</p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;!-- Header --&gt;
      &lt;header class="site-header"&gt;
          &lt;h1&gt;Site Title&lt;/h1&gt;
          &lt;h5&gt;Site Description&lt;/h5&gt;
  
          &lt;nav class="site-nav"&gt;
              &lt;ul&gt;
                  &lt;li&gt;Item 1&lt;/li&gt;
                  &lt;li&gt;Item 2&lt;/li&gt;
                  &lt;li&gt;Item 3&lt;/li&gt;
                  &lt;li&gt;Item 4&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  
      &lt;/header&gt;
  </code></pre>
  
  <p></p>
  
  <p>My problem is that the container div has padding on the right and left sides, but I want the header to ignore this padding, so the background color will show full width and not be cut off by the padding.</p>
  
  <p>Here's a jsfiddle of my code: <a href="http://jsfiddle.net/6e46fzge/" rel="noreferrer">http://jsfiddle.net/6e46fzge/</a></p>