Как убрать разрыв между заголовком и div контейнера в HTML5 Boilerplate

Я очень хочу использовать шаблон HTML5 Пола Айриша, но я ' вы столкнулись с проблемой css.

Я хочу, чтобы заголовок был на одном уровне в верхней части страницы, но я не могу, чтобы контейнер div добавил пробел, от которого я не могу избавиться.

Я думаю, это как-то связано с исправлением нижнего колонтитула. Я пробовал экспериментировать с разными размерами отступов для нижнего колонтитула и контейнера div, но безрезультатно.

Это HTML-код:

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

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

</div>
<footer>
  <p> footer content </p>
</footer>

Мой собственный 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;
}