title: Why am I getting white space between my HTML element?
body: <p>I'm trying to design a website for my mums backpackers business. The problem that I am having is between my banner image and my navbar there is a blank white line that you can see in the image. I thought this is to do with the margin so I have set it to zero for both of the elements to no avail.</p>
  
  <p>Also a second question - Why does my black border not cover the main content as well? I thought since its a body background it would go around every element in the body.</p>
  
  <p>I realise there may have been similar questions but I can't find the answer anywhere. I will appreciate anyones input - this is my first post here so I'm sorry if I screwed up any formatting.</p>
  
  <p>The image of my website can be found here:</p>
  
  <p><a href="http://postimage.org/image/20dhjcdb8/" rel="noreferrer">http://postimage.org/image/20dhjcdb8/</a></p>
  
  <p>Thanks in advance.</p>
  
  <p>I currently have the following code in my index.html file:</p>
  
  <pre><code>   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
      &lt;html&gt;
          &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="swaggersstyle.css"&gt;
              &lt;title&gt;Oamaru Backpackers Hostel, Swaggers Backpackers - Home&lt;/title&gt;
          &lt;/head&gt;
  
  
          &lt;body&gt;
          &lt;img src="final.jpg" id="banner"&gt;&lt;/img&gt;
          &lt;ul id="nav"&gt;
              &lt;li class="links"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li class="links"&gt;&lt;a href="planning.html"&gt;Planning&lt;/a&gt;&lt;/li&gt;
              &lt;li class="links"&gt;&lt;a href="construction.html"&gt;Construction&lt;/a&gt;&lt;/li&gt;
              &lt;li class="links"&gt;&lt;a href="evaluation.html"&gt;Evaluation&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;div id="mainc"&gt;
          &lt;p&gt;Make Yourself at Home&lt;/p&gt;
      &lt;p&gt;Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. &lt;/p&gt;
  
          &lt;/div&gt;   
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>and the following CSS code:</p>
  
  <pre><code>html{
      font-family: sans-serif;
      background-color:#464E54;
  }
  
  body{
      width: 960px;
      margin: auto;
      background-color: white;
      border: 5px solid black;
  }
  
  #banner{
      padding: 0px;
      margin: 0;
  }
  
  #nav {
      list-style-type: none;
      padding: 0px;
      margin: 0px;
      overflow: hidden;
  
  }
  
  #mainc {
  
      width: 960px;
      float: right;
      background-color: white;
      margin: 0;
  }
  
  .links {
      float: left;
      margin: 0px;
  }
  
  a:link, a:visited {
  
      display: block;
      width: 232px;
      font-weight: bold;
      color: grey;
      background-color: #dad8bf;
      text-align: center;
      padding: 4px;
      text-decoration: none;
      text-transform: uppercase;
      margin-top: 0px;
  }
  
  a:hover, a:active{
  
      background-color: #333333;
  }
  </code></pre>