nav div won't stay full screen - html

Question

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">
News
</li>
<li class="cg">
Videos
</li>
<li class="cg">
Photography
</li>
<li class="cg">
Our Magazine
</li>
<li class="cg">
Environment
</li>
<li class="cg">
Travel
</li>
<li class="cg">
Kids
</li>
<li class="cg">
Television
</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;
}

Answer 1

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