Horizontally aligning logo and nav menu in header

Question

for some reason I cannot get my logo and nav menu to horizontally align in my header. I'm still figuring out floating and display properties and I'm guessing that's the problem. I've tried putting display:inline-block on both and that seemed to work until I put width:100% on my navContainer. So how would I go about doing this?

Here's a jsfiddle of my trouble. Thanks in advance.

EDIT: I meant to say I am trying to make the navContainer on the right of my logo. Float:Left on my logo works but puts a white space above the header.

CSS

#header {
    width: 100%;
    height: 100px;
    background-color: #DDDDDD;
}

#innerHeader {
    margin: 0 auto;
    width: 75%;
    height: 100px;
}

#logo {
    width: 100px;
    height: 100px;
}

#navList {
    margin-left: 50px;
    width: 100%;
    height: 100px;
    background-color: red;
}

#navList li {
display: inline;
list-style-type: none;
padding-right: 20px;
}

HTML

<div id="wrapper">
    <div id="header">
        <div id="innerHeader">
            <div id="logo">
                <img src="http://i.imgur.com/ZZvupYE.png" title="Bad Gizmod" />
            </div>
            <div id="navList">
                <ul>
                    <li><a href="#">Item two</a>

                    </li>
                    <li><a href="#">Item three</a>

                    </li>
                    <li><a href="#">Item four</a>

                    </li>
                    <li><a href="#">Item five</a>

                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- {block:Posts} {/block:Posts} -->

Answer 1

EDIT :

I guess the OP wanted it on the right of his logo.

http://jsfiddle.net/N9rk5/6/

Here is the css for that

#header {
    width: 100%;
    height: 100px;
    background-color: #DDDDDD;

}

#innerHeader {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100px;
}

#logo {
    float: left;
    width: 20%;
     margin: 0 auto;
    height: 100px;
    display: inline-block;
}

#navList {
     display: inline-block;
     width: 70%;
    margin-left: 0px;
    float: right;
     text-align: center;
    height: 100px;
    background-color: red;
}

#navList li {

    display: inline;
    float: left;
    list-style-type: none;
    padding: 0 5px;
}

Answer 2

Try Adding:

#logo {
    float: left;
}

Don't forget to clear your floats though!