title: Space between html5 elements
body: <p>Okay so I'm trying to start from scratch building this html5 site with css, I've tried hard to eliminate the spaces between all the elements: header, nav, article, and footer</p>
  
  <p>They all stay there. I know it's a very basic question but I've spend some time on it and still can't figure what's going on.</p>
  
  <p>Any ideas how do i remove it?</p>
  
  <p>(IF YOU COPY AND SAVE THESE FILES YOU'LL SEE VERY CLEARLY THE SPACE)</p>
  
  <p>Thank you</p>
  
  <p>CODE:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;My first website&lt;/title&gt;
      &lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="wraper"&gt;
      &lt;header&gt;
          &lt;h1&gt;Header&lt;/h1&gt;
      &lt;/header&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  Inicio
              &lt;/li&gt;
              &lt;li&gt;
                  Conceito
              &lt;/li&gt;
              &lt;li&gt;
                  Fotos
              &lt;/li&gt;
              &lt;li&gt;
                  Informações
              &lt;/li&gt;
              &lt;li&gt;
                  Contato
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;article&gt;
          &lt;p&gt;
              Lore ipsum Lore ipsum Lore ipsum Lore ipsum 
              abc Lore ipsum bdede Lore ipsum Lore ipsum Lore ipsum 
              Lore ipsum Lore ipsum Lore ipsum Lore ipsum 
              abc Lore ipsum bdede Lore ipsum Lore ipsum Lore ipsum 
              Lore ipsum Lore ipsum Lore ipsum Lore ipsum 
              abc Lore ipsum bdede Lore ipsum Lore ipsum Lore ipsum.
          &lt;/p&gt;
      &lt;/article&gt;
      &lt;footer&gt;
          &lt;p&gt;Rua B, Lote 16, Vila Dom Pedro I, Paraty&lt;/p&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS CODE:</p>
  
  <pre><code>body { 
      margin: 0;
      height: 100%;
      font-family: sans-serif;
      background-color: #F2E8BD;
  }
  
  .wraper {
      width: 960px;
      background-color: #CCC49F;
      margin-left: auto;
      margin-right: auto;
  }
  
  nav, header, footer {
      margin-top: 0;
      padding: 0;
      margin: 0;
  }
  
  nav ul{
      margin: 0;
      }
  
  header{
      background-color: #F0F;
  }   
  
  nav{
      background-color: #08A;
  }
  
  nav li{
      display: inline;
  }
  
  article {
      background-color: yellow;
  }
  
  footer {
      margin: 0;
      background-color: red;
      }
  </code></pre>