Как предотвратить элементы, теряющие свою позицию при изменении размера окна

Question

Я создаю отзывчивую навигацию, используя только html и scss на этом этапе; но я столкнулся с ошибкой. Когда я изменяю размер окна выше 600 пикселей в ширину и меньше, медиа-запрос вступает в силу, и макет изменяется, как ожидалось.

Однако, когда я увеличиваю ширину до более 600 пикселей, <nav class="secondary_navigation"> опускается ниже исходного положения - появляется под заголовком. Иногда <a href="#" class="cta"> делает то же самое, но не последовательно.

Это было проверено только на Chrome.

<header> 
    <h1>Logo</h1> 
    <nav class="product_categories"> 
     <ul> 
      <li><a href="#"><span>Product One</span></a></li> 
      <li><a href="#"><span>Product Two</span></a></li> 
     </ul> 
    </nav> 
    <a href="#" class="cta">Call To Action</a> 
    <nav class="secondary_navigation"> 
     <ul> 
      <li><a href="#">Page One</a></li> 
      <li><a href="#">Page Two</a></li> 
      <li><a href="#">Page Three</a></li> 
     </ul> 
    </nav> 
</header> 

(довольно длинный) СКС:

// MEDIA QUERIES 
    $mq-600 : 'screen and (max-width: 600px)'; 

// DIMENSIONS 
    $head-height : 50px; 

// COLOURS 
    $cta : #bada55; 

header{ 
    background-color: rgba(0,255,255,0.75); 
    position: relative; 
    width: 100%; 
    ul{ 
     box-sizing: border-box; 
     list-style: none; 
     margin: 0; 
     padding: 0; 
    } 
    li{ 
     display: inline-block; 
     height: $head-height; 
     line-height: $head-height; 
     margin: 0; 
     padding: 0; 
     a{ 
      padding: 0 10px; 
     } 
    } 
    .product_categories{ 
     background-color: #fff; 
     display: inline-block; 
     height: 50px; 
     @media #{$mq-600} { 
      display: block; 
      height: auto; 
      li{ 
       background-color: #d3e1e5; 
       float: left; 
       height: 100%; 
       position: relative; 
       width: 50%; 
       a{ 
        position: absolute; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
        span{ 
         position: absolute; 
         bottom: 0; 
        } 
       } 
       &:before{ 
        content:''; 
        display: block; 
        padding-top: 100%; 
       } 
      } 
     } 
    } 
    .cta{ 
     border: 0; 
     background-color: $cta; 
     display: inline-block; 
     float: right; 
     line-height: 30px; 
     margin: 10px; 
     padding: 0 10px; 
     @media #{$mq-600} { 
      position: absolute; 
      top: 0; 
      right: 0; 
     } 
    } 
    .secondary_navigation{ 
     background-color: #fff; 
     display: inline-block; 
     height: 50px; 
     float: right; 
     @media #{$mq-600} { 
      display: block; 
      float: none; 
     } 
    } 
} 

h1{ 
    display: inline-block; 
    height: $head-height; 
    line-height: $head-height; 
    padding: 0 10px; 
} 

Так как я могу сделать второй нав оснастке туда, где он должен?

Адрес fiddle.

Изображения как запрошенный:

Это правильно:

Но когда я сжать страницу и повторно разворачивать, это происходит:

Answer 1

Вот обновленный Fiddle: http://jsfiddle.net/fw009x2z/3/

Я сделал небольшое изменение в твоей: изменилось

display: block; 

в

width: 100%; 

по какой-то причине, переключая его и от block не ценится некоторыми браузерами.