导航重叠到我的横幅上。我从来没有遇到过这个问题，也不知道为什么它现在这样做。我尝试用另一张图像替换它，它似乎很好，这让我更加困惑> http://tinypic.com/r/m8iqnr/8
这是我希望导航位于标题下方的位置。当我使窗口变小时，这里很好，因为横幅图像是响应式的> http://tinypic.com/r/19plwl/8
.HTML
<title>ISGM | Home</title>
</head>
<body id="body">
<div id="container">
<header id="head">
<h1 id="header">International Student's Guide to Manchester - Home</h1>
<img id="logo" src="media/logo.png" alt="Synergy Projects">
<a href="index.html"><img id="banner" src="media/banner.png" alt="International Student's Guide to Manchester" border="0"></a>
<p id="slogan"><em>Built by students, for students</em></p>
</header>
<nav>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="tours.html" id="current">Tours and Trips</a></li>
<li><a href="pages/food.html">Food</a></li>
<li><a href="pages/accommodation.html">Accommodation</a></li>
<li><a href="pages/nightlife.html">Nightlife</a></li>
</ul>
</div>
</nav>
.CSS
#header {text-indent: 100%;
white-space: nowrap;
overflow: hidden;
font-size: 0px;}
#logo {max-width: 15%;
float: left;}
#banner {max-width: 80%;
float: right;}
#body {padding-left: 10%;
padding-right: 10%;
margin-top: 0%;
margin-bottom: 0%;}
/* Nav */
ul#navlist
{margin-left: 0;
padding-left: 0;
white-space: nowrap;}
#navlist li
{display: inline;
list-style-type: none;}
#navlist a { padding: 3px 10px;}
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
/* Nav Close */
抱歉，如果在其他地方回答。我确实查看了其他类似的问题，但我是初学者，所以我并没有真正理解其他答案。
提前感谢，乔希
问题似乎是因为您的横幅图像具有流畅的宽度：高度和宽度将增大/缩小以填充空间。在较小的屏幕宽度下，图像较短，并且不会超出导航的位置。
我建议您清除nav元素以强制它出现在浮动横幅图像之后。将此代码添加到现有样式中 - 您可以根据自己的喜好更改填充值：
nav {
padding-top: 8px;
clear: both;
}
我做了一个小提琴，展示了它是如何工作的：http://jsfiddle.net/chicgeek/5SBej/