Aligning elements side by side correctly

Question

I’m not being able to align elements side by side correctly
To Div feels like I’m with Height: 0;
Just recognizing the height of the element without the Float: left;

HTML

The first is how it turned out. The second as it had to be.

    <div id="logo"></div>

    <nav id="menu">
        <ul>
            <li><a href="#">Sobre</a></li>
            <li><a href="#">Trabalhos</a></li>
            <li><a href="#">Contato</a></li>
        </ul>
    </nav>

</div>
</header>

CSS

a {
text-decoration: none;
color: #4B4B4B;
}

div#top-bar {

background-color: #f14949;
padding: 25px 80px 25px 80px;
}

div#logo {
vertical-align: middle;
float: left;
width: 86px;
height: 51px;
background-color: #4B4B4B;
border-radius: 6px;
}
nav#menu {

text-align: right;
}
nav#menu ul {
list-style: none;
}

nav#menu li {
display: inline-block;
}