Unwanted space around Nav
<p>I am new here and I am also creating my very first site from scratch. </p>

<p>As shown in the <a href="http://i.stack.imgur.com/BtZE2.png" rel="nofollow">image</a>, the nav bar at the top has space above and below it, which I don't want. I have tried removing/adding padding to the .nav ul but it doesn't seem to work. </p>

<p>What part of my HTML/CSS is responsible for this and how can I fix it? Thank you! </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
    &lt;div class="nav"&gt;
        &lt;ul&gt;
            &lt;li&gt;ABOUT&lt;/li&gt;
            &lt;li&gt;WORK&lt;/li&gt;
            &lt;li&gt;TEAM&lt;/li&gt;
            &lt;li&gt;CONTACT&lt;/li&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="second_section"&gt;
    &lt;div class="container"&gt;
        &lt;div class="copy"&gt;
            &lt;h1&gt;ACTUATE CONTENT&lt;/h1&gt;
            &lt;h3&gt;Expert content for every business&lt;/h3&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>