html - Nav周围多余的空间

我是新来的，我也从头开始创建我的第一个网站。

如image所示，顶部的导航栏在其上方和下方都有空间，我不希望这样。我尝试过删除/在.nav ul中添加填充，但似乎不起作用。

我的HTML / CSS的哪一部分负责此问题，如何解决？谢谢！

html, body {
    margin: 0;
}

div {
    display: block;
}

.header {
    background-color: #333333;
}

.nav {
    padding:  0;
    margin: 0 auto;
}

.nav ul {
    padding: 20;
}

.nav ul li {
    color: white;
    display: inline-block;
    padding: 20px 30px 20px 10px ;
    font-family: serif;
    font-weight: 200;
}

.second_section .container {
    background-image: url(http://1.bp.blogspot.com/-    I0jOcWYqW94/UdFZ9U8Si0I/AAAAAAAACRw/2Hhb0xY7yzY/s1600/84.jpg);
    height: 900px;
}

.copy {
    position: absolute;
    margin: 100px 50px 500px 500px;
    color: white;
    font-family: garamond;
}

<div class="header">
    <div class="nav">
        <ul>
            <li>ABOUT</li>
            <li>WORK</li>
            <li>TEAM</li>
            <li>CONTACT</li>
    </div>
</div>

<div class="second_section">
    <div class="container">
        <div class="copy">
            <h1>ACTUATE CONTENT</h1>
            <h3>Expert content for every business</h3>
        </div>
    </div>
</div>

最佳答案

提供以下css将删除所有浏览器在css之上使用的默认边距和填充。

* {
    margin: 0;
    padding: 0;
}

Working Fiddle

关于html - Nav周围多余的空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35504690/