title: Unexplained Gap Between <header> and <main>
body: <p>I can not seem to get rid of this space that exists between my header and main content. You will see a black background above the background image and below the navigation. Any help would be great. </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Awesome Landing Page&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="CSS/style.css"&gt;
      &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;div id="header-container"&gt;
              &lt;div class="col-3"&gt;
                  &lt;img class="logo" src="Images/logo-dark.png" height="18" width="143"&gt;
              &lt;/div&gt;
              &lt;div class="col-3"&gt;
              &lt;nav&gt;
                  &lt;ul class="menu"&gt;
                      &lt;li&gt;Home&lt;/li&gt;
                      &lt;li&gt;Features&lt;/li&gt;
                      &lt;li&gt;About&lt;/li&gt;
                      &lt;li&gt;Signup&lt;/li&gt;
                  &lt;/ul&gt;    
              &lt;/nav&gt;
              &lt;/div&gt;
              &lt;div class="col-3"&gt;
                  &lt;a href="#" class="getStartedBTN"&gt;Get Started&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!-- Header-Container Ends Here --&gt;
      &lt;/header&gt;
      &lt;main&gt;
      &lt;section&gt;
          &lt;div id="top-section-main"&gt;
              &lt;div id="top-section-content"&gt;
                  &lt;h1&gt;Awesome looks so good&lt;/h1&gt;
                  &lt;p&gt;Awesome is the landing page you wish you had when you started.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;    
      &lt;/section&gt;
      &lt;section&gt;&lt;/section&gt;
      &lt;section&gt;&lt;/section&gt;
      &lt;section&gt;&lt;/section&gt;
      &lt;section&gt;&lt;/section&gt;
      &lt;section&gt;&lt;/section&gt;
      &lt;/main&gt;
      &lt;footer&gt;&lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html {
      font-family: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  }
  body {
      background-color: black; 
      margin: 0;
  }
  header {
      height: 80px;
      background-color: #ffffff;
  }
  #header-container {
      width: 75%;
      margin: auto;
  }
  .col-3 {
      width: 33%;
      float: left;
  }
  .logo {
      padding-top: 30px;   
  }
  .menu {
      margin-top: 32px;  
  }
  .menu li {
      list-style-type: none;
      display: inline;
      font-size: .85em;
      color: #8e8e8e;
      padding-right: 30px;
  }
  .getStartedBTN {
      background-color: #6dc77a;
      border-radius: 28px;
      -moz-border-radius:28px;
      -webkit-border-radius:28px;
      text-decoration: none;
      color: #ffffff;
      padding: 10px 26px;
      margin-top: 20px;
      display: inline-block;
      font-size: 17px;
      float: right;
  }
  #top-section-main {
      height: 740px;
      background-image: url(../Images/friends.jpg);
  }
  </code></pre>