title: How to get rid of the left and right margins in 966 grid?
body: <p>When the viewport size is 784 x 741  there is a left and right margin applied to the box that I want to get rid of. I know how to get rid of the "white space" at the top, but it's the "white space on the sides that I can't get rid of. Does anyone know how to eliminate the white space so the header stretches the full width of the browser viewport? My codepen is below.</p>
  
  <p><a href="http://codepen.io/mike316/pen/xOKXKm" rel="nofollow">codepen</a></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="grid_12"&gt;
          &lt;header&gt;
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
              &lt;h1&gt;ALIEN&lt;/h1&gt;
          &lt;/header&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>