页面的标题和菜单在滚动点HTML / CSS处停止

Question

所以我的网站上有一个非常宽的页面，必须水平滚动才能在我的小显示器屏幕上看到它的所有内容。但是，当我滚动时，标题和菜单及其样式就会停止。像这样：

以下是该部分的HTML：

<!--website main heading layout-->
<div id="heading">
    <h1> Beat Your Pace <h1/>
    <h2> The music search tool to boost your running performance! </h2>
</div>

<!--topbar/menu layout-->
<div id="topbar">
<div id="topbar_wrapper">
    <ul id="mainmenu">
        <li><a href="home.php">Home</a></li><li>
        <a href="search.php">Search</a></li><li>
        <a href='add_song.php'>Add Song</a></li><li>
        <a href='about.php'>About</a></li><li>
        <a href="contact_us.php">Contact Us</a></li>
    </ul>
</div>
</div>

这是我的CSS部分;

#heading {
background: url("http://cdn4.techlila.com/wp-    content/uploads/2011/01/header2.jpg");
background-position: -50% 50%;
color: LightGrey;
font-weight:900;
text-shadow: 0px 0px 3px #000;
width: 100%;
}

#heading h1, h2 {
margin: 0px;
padding: 5px;
}

#topbar {
background-color: #222;
}
#topbar_wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}





#mainmenu {
list-style-type: none;
padding-left: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}
#mainmenu > li {
display: inline-block;
width: 200px;
}
#mainmenu li:hover {
background-color: #333;
}
#mainmenu li a{
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}

#mainmenu li:hover > ul {
display: block;
}

Answer 1

你需要一个包装器DIV来放置你需要的所有内容。

包装器CSS如下：

#wrapper {
    width: 100%;
    display: table;
}

工作演示：JSFiddle