nav div не будет отображаться полный экран

Question

У меня возникли проблемы с одним из моих 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; 
} 

Answer 1

Похоже, это из-за разницы в вашей <ul>. Вот JSFiddle, где я удалил поля: https://jsfiddle.net/jameson5555/wrzLcz3L/

ul { 
    margin: 0; 
}