title: There is a strange white line, that is using my Nav's background color, but I don't know why it's there HTML
body: <p>Many problem I have with this website. The other one rarely has any issues.
  First of all, I'm undergoing a major re-write of my files to look "neater" and whilst doing so, I managed to make a white line appear under my img with the logo in it. <a href="https://i.stack.imgur.com/ezgN2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ezgN2.jpg" alt="enter image description here"></a></p>
  
  <p>I'm really unsure what I've done wrong to make it appear, but I actually need it by the end of the book, but on the bottom. But that's not what I'm asking, I'm asking more of what can I do to remove the white space?</p>
  
  <p>My code for the page shown and the CSS is as follows:
  <strong>Index</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt; JavaJam Coffee House&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;link rel= "stylesheet" href="javajam.css"&gt;
  &lt;!--[if lt IE9]&gt;
  &lt;script src="http:html5shim.googlecode.com/svn/trunk/html5.js"&gt;
  &lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
  
  &lt;header&gt;  
      &lt;h1&gt;&lt;img src="javalogo.gif" alt="JavaJam Coffee House Logo" height="117" width="619"&gt;&lt;/h1&gt;
  &lt;/header&gt;
  
  &lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt; 
          &lt;li&gt;&lt;a href="menu.html"&gt;Menu&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="music.html"&gt;Music&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="jobs.html"&gt;Jobs&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;div id = "content"&gt;
  
  &lt;p&gt;
  &lt;img class="floatright" src="windingroad.jpg" height="156" width="333"&gt;
  &lt;ul&gt;
  &lt;li&gt;Specialty Coffee and Tea&lt;/li&gt;
  &lt;li&gt;Bagels, Muffins, and Organic Snacks&lt;/li&gt;
  &lt;li&gt;Music and Poetry Readings&lt;/li&gt;
  &lt;li&gt;Open Mic Night &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/p&gt;        
  
  &lt;p&gt; 12312 Main Street &lt;br&gt;
   Mountain Home, CA 93923 &lt;br&gt;
   1-888-555-5555
  &lt;/div&gt;
  
  
  
      &lt;footer&gt;
      &lt;em&gt;Copyright &amp;copy 2014 JavaJam Coffee House&lt;/em&gt; &lt;br&gt;
      &lt;a href="mailto:Johnathon@Olivas.com"&gt;Johnathon@Olivas.com&lt;/a&gt;
      &lt;/footer&gt;
      &lt;/body&gt;
  
      &lt;/div&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>header { background-color: #ccaa66;
          color: #000000;
          text-align: center; }
  
  h1 { line-height: 200%; }
  
  body { background-color: #ffffcc; 
          color: #330000;
          font-family: Verdana;
          background: url(background.gif) ;
          padding: 25px;}       
  
  nav { text-align: center;
      float: left;
      width: 100px;
      padding-top: 10px}
  nav a{ text-decoration: none;
      padding-bottom: 15px;}
  
  nav a:link {color: #996633}
  nav a:visited {color: #ccaa66}
  nav a:hover {color: #330000}
  nav ul {list-style-type:none;}
  
  footer { background-color: #ccaa66;
          color: #000000;
          font-size: 0.60em;
          font-style: italic;
          text-align: center;
          padding: 5px; }
  
  #wrapper { 
          background-color: #ffffcc;
          box-shadow: 5px 5px 5px #1e1e1e;
          margin-right: auto;
          margin-left: auto;
          width: 80%; 
          min-width: 700px;
          max-width: 1024px;}
  
  h2 { text-transform: uppercase;
      background-color: #ffffcc;
      font-size: 1.2em;
      color: #663300;
      border-bottom: 1px solid #000000;
      padding: 5px 0 0 5px;
      margin-left: 20px;
      clear: left;}
  
  img { border: 0px solid; }
  
  .details { padding-left: 20%;
             padding-right: 20%; }
  
  #content { padding-top: 10px;
      padding-bottom: 30px;
      padding-left: 20px;
      padding-right: 20px; 
      margin-left: 150px;
      background-color: #f2eab7;
      color: #000000; }
  
  .floatleft {float:left;
              padding-right:20px;
              padding-bottom:20px;}
  
  .floatright {float:right;
              padding-left:20px;}
  
  header, nav, main, footer { display: block;}
  </code></pre>
  
  <p>I have checked the index on an online html validator, used it's "edit" and it really messed the page up because it wanted to remove all kinds of things, so I didn't use that one.</p>
  
  <p>If anyone knows what the problem with said white spot is, I would be much appreciative. Thanks in advance :)</p>
  
  <p><strong>EDIT</strong>: Problem has been fixed. I didn't follow the instructions to point, and missed 2 steps (They seemed like it was just telling me things were going to change in the next few steps, so I didn't interpret them as actual steps.)</p>
  
  <p><strong>Temporary solution: remove <code>&lt;h1&gt;</code> and <code>&lt;/h1&gt;</code> from the header, and the white space goes away.</strong></p>