title: Dreamweaver design and live view show different things?
body: <p>please view images below:</p>
  
  <p><a href="http://gyazo.com/c3ffe1d0a48b717f695d7cbd860eda50.png" rel="nofollow">http://gyazo.com/c3ffe1d0a48b717f695d7cbd860eda50.png</a> (Design view)
  <a href="http://gyazo.com/a1e09aacc855c013d349017d0487402d.png" rel="nofollow">http://gyazo.com/a1e09aacc855c013d349017d0487402d.png</a> (Live &amp; browser view)</p>
  
  <p>As you can see in the design view everything that has been placed on the page looks fine, and is also exactly what I want! But when I go to live view or preview in a web browser it shows differently, with some of the content overlapping my navigation. I really do not know what to do? I will display my code below:</p>
  
  <p>HTML:</p>
  
  <pre><code>&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="news.html"&gt;News&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt; &lt;a href="events.html"&gt;Events&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt; &lt;a href="galleries.html"&gt;Galleries&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt; &lt;a href="videos.html"&gt;Video &lt;/a&gt;&lt;/li&gt;
            &lt;li&gt; &lt;a href="history.html"&gt;History&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt; &lt;a href="contact.html"&gt; Contact&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;    
        &lt;/nav&gt;    
  
  
  
     &lt;div id="contactheader"&gt;
          &lt;p&gt;Get in touch with FIFAScene: &lt;/p&gt;
     &lt;/div&gt;     
  
  
      &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
    &lt;div id="contactcontent"&gt;    
           &lt;p&gt;If you have any feedback regarding our website, or wish to comment on anything FIFA eSport related, then please contact us via:&lt;/p&gt;
    &lt;/div&gt;
  
      &lt;p&gt;&amp;nbsp;&lt;/p&gt;
      &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
      &lt;ul&gt;
            &lt;div id="contacthotmail"&gt;
                 &lt;li&gt;FIFAScene@hotmail.com&lt;img src="images/icons/outlook.png" width="112" height="95"&gt;&lt;/li&gt;
            &lt;/div&gt;
  
            &lt;div id="contactsm"&gt;
                   &lt;li&gt;&lt;a href="http://www.twitter.com/FIFAScene"&gt;www.twitter.com/FIFAScene&lt;img src="images/icons/twitter.png" width="94" height="78"&gt;&lt;/a&gt;
                   &lt;a href="http://www.facebook.com/FIFAScene"&gt;www.facebook.com/FIFAScene&lt;img src="images/icons/facebook.png" width="67" height="63"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/div&gt;
     &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>nav {
  float:left;
  position:relative;
  }
  
  nav ul li {
  display:block;
  margin:20%;
  padding:30%;
  list-style-type: none;
  font-family:Segoe UI Light;
  font-size:30px;
  text-align: center;
  }
  
  #contactheader {
  text-align:center;
  color:#0099FF;
  font-family:Segoe UI Light, sans-serif;
  font-size:20px;
  }
  
  #contactcontent {
  text-align:center;
  color:#0099FF;
  font-family:Segoe UI Light, sans-serif;
  font-size:18px;
  }
  
  #contacthotmail {
  text-align:center;
  color:#0099FF;
  font-family:Segoe UI Light, sans-serif;
  font-size:18px;
  }
  
  #contactsm {
  text-align:center;
      color:#0099FF;
  font-family:Segoe UI Light, sans-serif;
  font-size:18px;
  margin-top:40px;
  
  }
  </code></pre>
  
  <p>Sorry if I have provided too much information, I am relatively new to designing websites and programming!</p>
  
  <p>Thank you.</p>