How to remove gap between header and container div in HTML5 Boilerplate

I'm keen to use Paul Irish's HTML5 boilerplate but I've encountered a css problem.

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.

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.

This is the html code:

<header>
  <p> header content </p>
</header>

<div id="main" role="main">

</div>
<footer>
  <p> footer content </p>
</foot开发者_如何学编程er>

My custom CSS:

#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;
}

@techjacker; may be you have to write like this:

 header{display:block}
    p{margin:0;padding:0}

This sometimes help:

• Set margins, and padding to 0.
• And make sure that encoding is set to: UTF-8 without BOM.