title: How to remove gap between header and container div in HTML5 Boilerplate
body: <p>I'm keen to use Paul Irish's HTML5 boilerplate but I've encountered a css problem.</p>
  
  <p>I want the header to be flush at the top of the page but I can't the container div adds a gap that I'm unable to get rid of.</p>
  
  <p>I think this has something to do with the clearfix for the footer. I've tried experimenting with different padding sizes for the footer and container div but to no avail.</p>
  
  <p>This is the html code:</p>
  
  <p></p>
  
  <pre><code>&lt;header&gt;
    &lt;p&gt; header content &lt;/p&gt;
  &lt;/header&gt;
  
  &lt;div id="main" role="main"&gt;
  
  &lt;/div&gt;
  &lt;footer&gt;
    &lt;p&gt; footer content &lt;/p&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p> </p>
  
  <p>My custom CSS:</p>
  
  <pre><code>#container {
      background-color:orange;
      padding:1px; /* can't be zero */
      margin:0; 
  }
  
  footer {
      margin: 1px 0;
  }
  
  body {
      width:960px;
      margin:0 auto;
      background:blue;
      padding:0;
  }
  </code></pre>