title: How to remove this gap between two sections (one on top of the other)?
body: <p>I have two sections(a header section and main body section) and for whatever reason there is this big gap. I have tried many things such as setting padding to 0, margin to 0, etc but nothing seems to get the job done. Please help!
  <a href="http://jsfiddle.net/Pfc2Z/2/" rel="nofollow">http://jsfiddle.net/Pfc2Z/2/</a></p>
  
  <p>Here's the relevant HTML</p>
  
  <pre><code>    &lt;section class="header"&gt;
          &lt;section class="logo"&gt;
              &lt;img src="logo.png" height="100px" width="200px" alt="Img Not Available"&gt;
          &lt;/section&gt;
          &lt;section class="link"&gt;
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;    
                          &lt;a href="#"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/section&gt;
      &lt;/section&gt;
      &lt;section class="main"&gt;
          &lt;p&gt;Hello World&lt;/p&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>Here is the CSS</p>
  
  <pre><code>html, body {
  margin:0;
  padding:0;
  background-color:#46a7bb;
  }
  .header {
      background-color:#313145;
  }
  .logo {
      padding-left:20%;
  }
  .logo, .link {
      display:inline-block; 
  }
  nav ul {
      list-style:none;
      padding:0;
      margin:0;
  }
  .main {
      background-color:white;
      width:60%;
      margin:0 auto;
  }
  </code></pre>