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

Question

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>
</footer>

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

Answer 1

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

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

Answer 2

This sometimes help:

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