请查看以下图片：
http://gyazo.com/c3ffe1d0a48b717f695d7cbd860eda50.png（设计视图） http://gyazo.com/a1e09aacc855c013d349017d0487402d.png（实时和浏览器视图）
正如您在设计视图中看到的那样，放置在页面上的所有内容看起来都很好，这也正是我想要的！但是当我在网络浏览器中进行实时查看或预览时，它会显示不同的内容，其中一些内容与我的导航重叠。我真的不知道该怎么办？我将在下面显示我的代码：
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> </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> </p>
<p> </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;
}
抱歉，如果我提供了太多信息，我对设计网站和编程还比较陌生！
谢谢你。