HTML не полностью жидкий

Привет, я новичок в html & css, и у меня есть вопрос. Я пытаюсь сделать мою страницу максимально жидкой, но по какой-то причине моя кнопка и h3 продолжают сталкиваться с навигационной панелью. Может кто-нибудь, пожалуйста, помогите мне?

это мой html-код:

<div id="content">
   <h2>Kleding</h2>
    <div id="navbanner">
    <div id="nav2">
        <ul>
            <li><a href="#Pasgeborenen">Pasgeborenen</a></li>
            <li><a href="#Baby">Baby</a></li>
            <li><a href="#Peuter">Peuter</a></li>
            <li><a href="#Kleuter">Kleuter</a></li>
        </ul>
    </div>
    </div>
    <div id="img">
     <button onclick="ShowCheckBoxes()"><img src="../images/winkelwagen.jpg"></button>
    </div>
    <a name="Pasgeborenen"><h3>Pasgeborenen</h3></a>
</div>

и здесь используется css:

#content{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
}

#navbanner{
width: 100%;
height: 5.5em;
background: orange;
}
#nav2{
 text-align: center;

}
/* unorded list */
#nav2 ul{
 display: inline-block;
 list-style-type:none;
 margin-left: auto;
 margin-right: auto;
}

#nav2 ul li{
 float:left;

}
 #nav2 ul li a:hover{
  background-color: #ffbc00;
  text-decoration: underline;
 }
/* text in blokken */
#nav2 ul li a{
 display: inline-block;
 padding: 1em;
 background: orange;
 font-family: Arial, sans-serif;
 font-size: large;
 color: white;
}
button{
 float: right;
}

Заранее спасибо!