title: HTML elements overlapping despite block attribute
body: <p>Trying to learn the more advanced features of CSS with positions etc. Using CSS Zen Garden as a guide.</p>
  
  <p>However, I have my heading and navigational bar in a section. With a Div underneath it.</p>
  
  <p>I have put a 2px blue border around the div but for some reason it starts miles up the page underneath the previous section. 
  I have a codepen here: 
  <a href="http://codepen.io/anon/pen/WbLwWV" rel="nofollow">http://codepen.io/anon/pen/WbLwWV</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body class="page-wrapper"&gt;
      &lt;div class="title-section"&gt;
      &lt;section&gt;
          &lt;header&gt;
              &lt;h1&gt;&lt;img src="header_logo.png" height="61" width="394"&gt;&lt;/h1&gt;
          &lt;/header&gt;
          &lt;nav class="navigation"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Upcoming Events&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Recruitment&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Blog&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Concerts &amp;amp; Festivals&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Choir in the Community&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;div class="header-image"&gt;&lt;/div&gt;
      &lt;/section&gt;
  &lt;/div&gt;
          &lt;div class="intro"&gt;
              &lt;p&gt;The Choir&lt;/p&gt;
          &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      font-family: 'Open Sans',Frutiger,"Frutiger Linotype",Univers,Calibri,"Gill Sans","Gill Sans MT","Myriad Pro",Myriad,"DejaVu Sans Condensed","Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size: 16px;
      line-height: 1.25em;
  }
  .page-wrapper {
  }
  .title-section {
      background: linear-gradient(to bottom, #FFFFFF 0%, #EDF6FF 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
      float: left;
      height: 480px;
      width: 100%;
  }
  header {
      margin: 0 auto;
      max-width: 1040px;
      position: relative;
      text-align: center;
      top: 0;
      width: 100%;
      z-index: 1;
  }
  nav {
      display: block;
      margin: 0 auto;
      min-height: 30px;
      width: 80%;
  }
  nav ul {
      margin: 0 auto;
  }
  nav ul li a:hover {
      border-bottom: 1px solid #A3E0FF;
      border-color: #A3E0FF;
  }
  .header-image {
      background: url("header_photo.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
      border: 1px solid;
      height: 303px;
      margin: 0 auto;
      width: 800px;
  }
  .intro {
      border-top: 5px solid blue;
      height: 500px;
      position: relative;
      top: 100px;
      width: 100%;
  }
  </code></pre>
  
  <p>If anyone can point me in the right direction and explain why, that'll be great!</p>
  
  <p>Thanks
  Mike</p>