请查看以下图片：
http://gyazo.com/c3ffe1d0a48b717f695d7cbd860eda50.png（设计视图）http://gyazo.com/a1e09aacc855c013d349017d0487402d.png（实时和浏览器视图）
正如您在设计视图中看到的，页面上放置的所有内容看起来都很好，也正是我想要的!但是当我在Web浏览器中转到实时视图或预览时，它显示的不同，一些内容与我的导航重叠。我真的不知道该怎么办？我将在下面显示我的代码：
超文本：

<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;

}

抱歉，如果我提供了太多的信息，我是相对较新的设计网站和编程!
谢谢你。