nav div不会全屏显示(nav div won't stay full screen)

nav div不会全屏显示(nav div won't stay full screen)

我的一个div有一些问题。 页面从上到下从左到右设置为全屏，一切都很好，直到我开始在div“top_nav”中添加一些内容，这似乎将整个“header_wrapper”向下推。 我的CSS也会告诉你所发生的一切。

<div id="wrapper">
    <!-- header Section -->
    <div id="header_wrapper">
        <div id="header_content">
            <div id="top_nav">
                <ul>
                    <li class="cg">Login/Register</li>
                    <li class="cg">Shopping</li>
                    <li>
                        <form action="http://www.example.com/login/">
                            <input name="search" placeholder="Enter keyword" type="search"><input type="submit" value="Search">
                        </form>
                    </li>
                </ul>
            </div>
            <div id="logo"></div>
            <div id="bottom_nav">
                <ul>
                    <li class="cg">
                        <a href="news.html">News</a>
                    </li>
                    <li class="cg">
                        <a href="videos.html">Videos</a>
                    </li>
                    <li class="cg">
                        <a href="photography.html">Photography</a>
                    </li>
                    <li class="cg">
                        <a href="magazine.html">Our Magazine</a>
                    </li>
                    <li class="cg">
                        <a href="environment.html">Environment</a>
                    </li>
                    <li class="cg">
                        <a href="travel.html">Travel</a>
                    </li>
                    <li class="cg">
                        <a href="kids.html">Kids</a>
                    </li>
                    <li class="cg">
                        <a href="television.html">Television</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
 
#html,body {
    margin: 0;
    padding: 0;
}

#wrapper {
    margin: 0 auto;
    padding: 0;
    background-color: #DDDAD4;
}

#header_wrapper {
    width: 100%;
    height: 110px;
    background-color: #383838;
    overflow: hidden;
}

#header_content {
    width: 1000px;
    height: 110px;
    background-color: #ffc0cb;
    margin: auto;
}

#top_nav {
    width: 1000px;
    height: 30px;
    background-color: green;
}

#top_nav li {
    display: inline;
    color: #fff;
}

#logo {
    width: 80px;
    height: 80px;
    background-color: #000;
    float: left;
}

#bottom_nav {
    width: 920px;
    height: 80px;
    background-color: red;
    float: right;
}

#bottom_nav li {
    display: inline;
}

#bottom_nav a {
    color: #fff;
}
I'm having some issues with one of my div. The page is set to full screen top to bottom left to right and everything is fine until I start adding some content into the div "top_nav" which seems to push the entire "header_wrapper" downward. My CSS will tell you everything thats going on as well.
 
<div id="wrapper">
    <!-- header Section -->
    <div id="header_wrapper">
        <div id="header_content">
            <div id="top_nav">
                <ul>
                    <li class="cg">Login/Register</li>
                    <li class="cg">Shopping</li>
                    <li>
                        <form action="http://www.example.com/login/">
                            <input name="search" placeholder="Enter keyword" type="search"><input type="submit" value="Search">
                        </form>
                    </li>
                </ul>
            </div>
            <div id="logo"></div>
            <div id="bottom_nav">
                <ul>
                    <li class="cg">
                        <a href="news.html">News</a>
                    </li>
                    <li class="cg">
                        <a href="videos.html">Videos</a>
                    </li>
                    <li class="cg">
                        <a href="photography.html">Photography</a>
                    </li>
                    <li class="cg">
                        <a href="magazine.html">Our Magazine</a>
                    </li>
                    <li class="cg">
                        <a href="environment.html">Environment</a>
                    </li>
                    <li class="cg">
                        <a href="travel.html">Travel</a>
                    </li>
                    <li class="cg">
                        <a href="kids.html">Kids</a>
                    </li>
                    <li class="cg">
                        <a href="television.html">Television</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
 
#html,body {
    margin: 0;
    padding: 0;
}

#wrapper {
    margin: 0 auto;
    padding: 0;
    background-color: #DDDAD4;
}

#header_wrapper {
    width: 100%;
    height: 110px;
    background-color: #383838;
    overflow: hidden;
}

#header_content {
    width: 1000px;
    height: 110px;
    background-color: #ffc0cb;
    margin: auto;
}

#top_nav {
    width: 1000px;
    height: 30px;
    background-color: green;
}

#top_nav li {
    display: inline;
    color: #fff;
}

#logo {
    width: 80px;
    height: 80px;
    background-color: #000;
    float: left;
}

#bottom_nav {
    width: 920px;
    height: 80px;
    background-color: red;
    float: right;
}

#bottom_nav li {
    display: inline;
}

#bottom_nav a {
    color: #fff;
}

                
最满意答案
                
                    
                        
 看起来是因为<ul>中的边距。 这是一个JSFiddle，我删除了边距： https ：//jsfiddle.net/jameson5555/wrzLcz3L/ 
 
ul {
    margin: 0;
}
Looks like it's because of the margin in your <ul>. Here's a JSFiddle where I removed the margins: https://jsfiddle.net/jameson5555/wrzLcz3L/
 
ul {
    margin: 0;
}