Css 为什么页眉浮动会在页面顶部留下一个边距？

我正在做一个基于Treehouse项目的实践站点，我有一个小问题。我已经设计了一个header元素，到目前为止，我所做的一切都很好，我唯一的问题是当我将元素向左浮动时，页面顶部会有一个空白。在没有浮动的情况下，元素与浏览器的顶部正好对接。 是什么导致出现此边距？我正在使用normalize.css，我的代码如下：

    <header>
        <a href="index.html" class="logo">
            <h1>Nick Pettit</h1>
            <h2>Designer</h2>
        </a>
        <nav>
            <ul>
                <li><a href="">Portfolio</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </nav> 
    </header>




body {
    font-family: 'Open Sans', sans-serif;
}

.wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

h3 {
    margin: 0 0 1em 0;
}


header {
    float: left;
    margin: 0 0 30px 0;
    padding: 5px 0 0 0;
    width: 100%;
}

.logo {
    text-align: center;
    margin: 0;
}

h1 {
    font-family: "Changa One", sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}

h2 {
    font-size: .75em;
    margin: -5px 0 0 ;
    font-weight: normal;
}

身体{
字体系列：“开放式Sans”，无衬线；
}
.包装纸{
最大宽度：940px；
保证金：0自动；
填充：0.5%；
}
a{
文字装饰：无；
}
img{
最大宽度：100%；
}
h3{
边际：0.01米0；
}
标题{
浮动：左；
利润率：0.30px0；
填充：5px0；
宽度：100%；
}
.标志{
文本对齐：居中；
保证金：0；
}
h1{
字体系列：“长安一号”，无衬线；
利润率：15px0；
字号：1.75em；
字体大小：正常；
线高：0.8em；
}
氢{
字体大小：.75em；
保证金：-5px0；
字体大小：正常；
}

有一些空格：

• 具有

  页边距顶部：15px

  （由

  页边距：15px 0

  引起）

• 具有

  填充顶部：15px

  （由

  填充：5px 0

  引起）
• （*）
  具有

  页边距顶部：8px

  （由浏览器内部样式表中的

  页边距：8px

  引起）

删除它们不会产生空间：

（*）在Firefox 31上。其他浏览器的行为可能会有所不同