html - Dreamweaver のデザインとライブ ビューで表示される内容は異なりますか?

Question

以下の画像をご覧ください：

http://gyazo.com/c3ffe1d0a48b717f695d7cbd860eda50.png (デザイン ビュー) http://gyazo.com/a1e09aacc855c013d349017d0487402d.png (ライブ & ブラウザー ビュー)

デザイン ビューでわかるように、ページに配置されたものはすべて問題なく表示され、まさに私が望んでいるものでもあります! しかし、Web ブラウザーでライブ ビューまたはプレビューに移動すると、一部のコンテンツがナビゲーションと重なって表示が異なります。私は本当に何をすべきか分からないのですか？以下にコードを表示します。

HTML:

<nav>
        <ul>
          <li> <a href="index.html">Home</a></li>
          <li> <a href="news.html">News</a></li>
          <li> <a href="events.html">Events</a></li>
          <li> <a href="galleries.html">Galleries</a></li>
          <li> <a href="videos.html">Video </a></li>
          <li> <a href="history.html">History</a></li>
          <li> <a href="contact.html"> Contact</a></li>

        </ul>    
      </nav>    



   <div id="contactheader">
        <p>Get in touch with FIFAScene: </p>
   </div>     


    <p>&nbsp;</p>

  <div id="contactcontent">    
         <p>If you have any feedback regarding our website, or wish to comment on anything FIFA eSport related, then please contact us via:</p>
  </div>

    <p>&nbsp;</p>
    <p>&nbsp;</p>

    <ul>
          <div id="contacthotmail">
               <li>FIFAScene@hotmail.com<img src="images/icons/outlook.png" width="112" height="95"></li>
          </div>

          <div id="contactsm">
                 <li><a href="http://www.twitter.com/FIFAScene">www.twitter.com/FIFAScene<img src="images/icons/twitter.png" width="94" height="78"></a>
                 <a href="http://www.facebook.com/FIFAScene">www.facebook.com/FIFAScene<img src="images/icons/facebook.png" width="67" height="63"></a></li>
          </div>
   </ul>

CSS:

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;

}

情報を提供しすぎて申し訳ありません。私はウェブサイトのデザインやプログラミングに比較的慣れていません。

ありがとうございました。