Misaligned elements in navigation bar

Problem

I am creating a website and am currently working on the main navigation bar. It looks like I am having trouble getting the elements to line up. It was working mostly fine until I added the hamburger menu icon at the top right. Screenshot

I am guessing it has something to do with turning on Float in order to get the logo and hamburger icon to the edges of the page while keeping the links intact.

Here is the source code for the navigation bar. (After PHP execution.)

    <html lang="en">
<head>
    <meta charset="utf-8">
    <title>Alexworks</title>
    <link rel="stylesheet" type="text/css" href="/resources/CSS/main.css" media="screen" />
<body><nav  id="navigation">
    <ul>
        <li id="logo"><a href="http://alexandstein.com/">Alexworks</a></li>
        <li><a href="http://alexandstein.com/main/about">About</a></li>
        <li><a href="http://alexandstein.com/main/projects">Projects</a></li>
        <li><a href="http://alexandstein.com/main/meta">Meta</a></li>
        <li id="hamburger"><img src="http://alexandstein.com/resources/images/icons/hamburger.png" alt="Menu" class="iconSmall"/>        </li>
    </ul>
</nav><div id="content">

And here is the CSS pertaining to the navigation bar.

    body{
    font-family: helvetica;
    font-size: 1.1em;
    margin: 0%;
    padding-top: 0%;
}

#navigation{
    list-style-type: none;
    text-align: center;
    width: 100%;
    margin: 0%;
    padding: 0%;

    background-color: black;
    height: 2em;
}
#navigation ul{
    margin: 0%;
    padding: 0%;
    padding-top: 0%;
}
#navigation a{
    color: #aaa;
}
#navigation a:visited{
    color: #999;
}
#navigation a:hover{
    color: #bbb;
}
#navigation li{
    display: inline-block;
    width: 15em;
    height: 1.8em;

    border-bottom-style: solid;
    border-bottom-color: red;
}
#navigation li:hover{
    background-color: #333;
}
#navigation .iconSmall{
    width: 30px;
    height:30px;
}
#navigation #logo{
    display: inline-block;
    text-align: left;
    width: inherit;
    float:left;
    letter-spacing: 5px;
}
#navigation #links{
    display: inline-block;
}
#navigation #hamburger{
    width: 30px;
    border-bottom-style: none
    float: right;
}

a{
    text-decoration: none;
}

Excuse any messy code. I'm used to programming and not hypertext and style sheets.

Problem courtesy of: Saxophlutist

Solution

The issue is the missing ; semicolon in your CSS after border-bottom-style: none

Fix:

#navigation #hamburger{
    width: 30px;
    border-bottom-style: none;
    float: right;
}

Demo: http://jsfiddle.net/pratik136/yCV6D/

Solution courtesy of: bPratik

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.