Выравнивание по левому краю логотипа и выравнивание по правому краю навигации на адаптивном сайте HTML / CSS

Question

Я пытаюсь выровнять мой логотип по левому краю и по правому краю. Я использую шаблон " скелет" для отзывчивой страницы.

Логотип и навигация не будут оставаться на одной "линии", когда я плаваю правильно. Я удалил правило float right из CSS перед тем, как добавить его в этот пример.

Вот некоторые из CSS, которые я использую, и где я думаю, что проблема моя, а остальные перечислены здесь

.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

Вы скучаете по alpha а также omega классы, которые удаляют поля из левого и правого элементов соответственно.

HTML должен выглядеть следующим образом:

<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>

Вот Code Pen с примером кода: http://cdpn.io/rHBio

РЕДАКТИРОВАТЬ

Чтобы объяснить дальше (даже после downvote #bitter).

Причина, по которой у вас есть навигация по двум отдельным строкам, заключается в том, что после следующего медиазапроса контейнер и все столбцы устанавливаются на 300 пикселей.

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

Существует другой медиа-запрос, который переопределяет этот запрос для любых устройств от 480 до 767 пикселей и дает ширину 420 пикселей.

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

Поскольку используемые классы, two-thirds а также one-third, теперь установлены либо 420px, либо 300px, там они занимают весь ряд (они становятся линейными).

Чтобы переопределить это и разместить их в одной строке, вам нужно настроить таргетинг на эти элементы с помощью дополнительных правил CSS, чтобы уменьшить их ширину до 100/200px или 120/300px, чтобы соответствовать медиа-запросам.