left align logo and right align navigation on a responsive html/css site

Question

I am trying to left align my logo and right align my navigation. I am using the "skeleton" boilerplate for a responsive page.

The logo and nav wont stay on the same "line" when I float my Nav right. I removed the float right rule from the CSS before adding it to this example.

Here is some of the CSS I'm using and where i think the problem my be and the rest is listed here

.nav {
margin: 0px;
padding: 0px;
white-space: nowrap;
list-style-type: none;

}
.logo {

}
.nav li {
display:inline;
}
.nav li a {
 padding:0.2em 1em;
 background:#;
 color:#000;
text-decoration:none;
border:0px solid #000;
}
.nav li a hover{
background:#08c;
color:#fff;
 } 

Answer 1

You're missing the alpha and omega classes that remove the margin from the left and right elements respectively.

The HTML should look like this:

<div class="header">
       <div class="two-thirds column alpha">
         <div class="logo"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQNGEBMvQ55sHEC0xWxvpkyW-H_ZylS9Fk5ktg3OLKLS3w6yCr29w" width="47" height="36"></div>
      </div>
      <div class="one-third column omega">
        <div class="nav">
          <ul><li><a href="hire.html">hire</a></li><li><a href="bio.html">Bio</a></li><li><a href="contact.html">Contact</a></li><li><a href="blog.html">blog</a></li></ul>
        </div>
      </div>

Here's a Code Pen with the example code: http://cdpn.io/rHBio

EDIT

To explain further (even after the downvote #bitter).

The reason you have the navigation on two separate lines is because after the following media query the container and all of the columns are set to 300px.

 @media only screen and (max-width: 767px) {
        .container { width: 300px; }}

There is another media query that overrides that one for any devices between 480px and 767px and gives a width of 420px.

 @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }

Because the classes used, two-thirds and one-third, are now set to either 420px or 300px there they take up the entire row (they become stacked/linear).

To override this and have them on the same line you will need to target those elements through additional CSS rules to reduce their width to 100/200px or 120/300px to fit in with the media queries.