title: Extend background-color of header beyond container with css
body: <p>I have been searching the web for a while now for an answer to my question. I would like to extend a div background-color beyond the div (and the container div as well) so it reaches the width of the browser. Like so <a href="http://vinnusal.is/" rel="noreferrer">http://vinnusal.is/</a>
  The problem with the example above is I'm using a padding/margin fix which creates an annoying scroll to the right. I have tried overflow without any luck.</p>
  
  <p>I know this could be done with a container div that is 100% and nesting divs that are smaller. However I would like to use another way if possible, because this is my first shot at a fluid site with all complications that follow.</p>
  
  <p>Thanks in advance,
  Helgi</p>
  
  <p>Here is the HTML markup:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="gridContainer clearfix"&gt; &lt;!-- Container --&gt;
  
    &lt;div class="gridContainer clearfix header" id="header"&gt; &lt;!--Header begins--&gt; 
  &lt;img src="pics/hvitt.png" alt="VFI Logo" name="logo" id="logo"&gt;
  
  &lt;!-- Menu Horizontal --&gt;
  ... irrelevant markup for menu...
  
    &lt;/div&gt;
  
    &lt;!-- Header ends --&gt;
  &lt;div class="gridContainer clearfix submenu" id="submenu"&gt; &lt;!-- Submenu begins --&gt;
  &lt;h1&gt;&lt;!-- InstanceBeginEditable name="title" --&gt;Articles&lt;!-- InstanceEndEditable --&gt;&lt;/h1&gt;
  </code></pre>
  
  <p>
    </p>
  
  <p>And the CSS:</p>
  
  <pre><code>/* Mobile Layout: 480px and below. */
  
  .gridContainer {
      margin-left: auto;
      margin-right: auto;
      width: 88.626%;
      padding-left: 1.1869%;
      padding-right: 1.1869%;
  }
  #LayoutDiv1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #header {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #submenu {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #article {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #footer {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #leftColumn {
      clear: none;
      float: left;
      margin-left: 2.6785%;
      width: 100%;
      display: block;
  }
  #rightColumn {
      clear: none;
      float: left;
      margin-left: 2.6785%;
      width: 100%;
      display: block;
  }
  #header2 {
      clear: none;
      float: left;
      margin-left: 2.6785%;
      width: 100%;
      display: block;
  }
  
  /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
  
  @media only screen and (min-width: 481px) {
  .gridContainer {
      width: 91.4836%;
      padding-left: 0.7581%;
      padding-right: 0.7581%;
  }
  #LayoutDiv1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #header {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #submenu {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #article {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #footer {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #leftColumn {
      clear: none;
      float: left;
      margin-left: 1.6574%;
      width: 100%;
      display: block;
  }
  #rightColumn {
      clear: none;
      float: left;
      margin-left: 1.6574%;
      width: 100%;
      display: block;
  }
  #header2 {
      clear: none;
      float: left;
      margin-left: 1.6574%;
      width: 100%;
      display: block;
  }
  }
  
  /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
  
  @media only screen and (min-width: 769px) {
  .gridContainer {
      width: 78.9565%;
      max-width: 1232px;
      padding-left: 0.5217%;
      padding-right: 0.5217%;
      margin: auto;
  }
  #LayoutDiv1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #header {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #submenu {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #article {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #footer {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #leftColumn {
      clear: none;
      float: left;
      margin-left: 1.3215%;
      width: 100%;
      display: block;
  }
  #rightColumn {
      clear: none;
      float: left;
      margin-left: 1.3215%;
      width: 100%;
      display: block;
  }
  }
  </code></pre>