Как расширить строки, содержащие плавающие элементы, расширить до 100% ширины?

Question

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

Вот изображение, чтобы проверить: http://i.imgur.com/EKd3cZY.png Вы можете видеть, какая ширина должна быть и какова ширина на самом деле.

Вот мой HTML:

<section class="row"> 
    <nav class="top-bar-navigation"> 
     <div class="main-menu-holder"> 
      <ul class="main-menu"> 
       <li><a class="active" href="#">Active</a></li> 
       <li><a href="#">Page 2</a></li> 
       <li><a href="#">Page 3</a></li> 
       <li><a href="#">Page 4</a></li> 
       <li><a href="#">Page 5</a></li> 
      </ul> 
      <button>CTA BUTTON</button> 
     </div> 
     <ul class="secondary-menu"> 
      <li><a href="#">Support</a></li> 
      <li><a href="#">Docs</a></li> 
      <li><a href="#">Why</a></li> 
      <li><a href="#">Social</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </nav> 
</section> 

Вот SASS я создал для элемента нав. Есть некоторые другие стили для элементов по умолчанию, как книгопечатание, но я не думаю, что это отношение к этому вопросу:

.top-bar-navigation { 
width: 100%; 
clear: both; 

.main-menu-holder { 
    border-bottom: 2px solid $pale-grey; 
    overflow: hidden; 
} 

.main-menu-holder, 
.secondary-menu { 
    float: right; 
} 

span, 
button, 
.main-menu { 
    display: inline-block; 
} 

li { 
    display: inline-block; 
} 

a { 
    color: black; 
    font-weight: 300; 
} 

a.active { 
    font-weight: 700; 
} 
} 

Вот стиль Row:

.row { 
    width: 90%; 
    margin: auto; 
    max-width: 1100px; 
    margin-bottom: 5px; 
} 

.row:after { 
    content: "."; 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
} 

Answer 1

Вы пробовали использовать <hr /> или создавая новый div с классом на нем, чтобы создать его для создания того же эффекта?