title: Space between navigation bar and header?
body: <p>So I am trying to make a web tutorials page just to help out my skills and I cannot seem to figure out why there is a space between the bottom of my navigation bar and the top of my first header? If anyone could possibly tell me what I wrote that would separate these two that would be amazing!</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>body{
   margin: 0;
   padding: 0;
   background: #cccccc;
  }
  .nav ul{
   list-style: none;
   background-color: #444444;
   text-align: center;
   padding: 0;
   margin: 0;
  }
  .nav li{
   font-family: 'Oswald'. sans-serif;
   font-size: 1.2em;
   line-height: 40px;
   height: 40px;
   border-bottom: 1px solid #888888;
   
  }
  .nav a{
   text-decoration: none;
   color: #ffffff;
   display: block;
  }
  .nav a:hover{
   background-color: #005f5f;
   transition: .3s background-color;
  }
  .nav a.active{
   background-color: #ffffff;
   color: #444444;
   cursor: default;
  }
  @media screen and (min-width: 600px){
   .nav li{
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
   }
  }
  .header{
   background-color: blue;
   height: 70px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;!-- Responsive design --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Web Tutorials - Making web development easier!&lt;/title&gt;
  
      &lt;!-- Custom Css --&gt;
      &lt;link href="style.css" rel="stylesheet"&gt;
   
   
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="nav"&gt;
        &lt;ul&gt;
          &lt;li class="home"&gt;&lt;a class="active" href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
          &lt;li class="tutorials"&gt;&lt;a href="#"&gt;HTML&lt;/a&gt;&lt;/li&gt;
          &lt;li class="about"&gt;&lt;a href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
          &lt;li class="contact"&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
   &lt;div class="header"&gt;
    &lt;h1&gt;Welcome to Web Tuts&lt;/h1&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>