фундамент 5 центр Выравнивание верхней панели

Question

я не могу показаться, чтобы выровнять верхнюю планку с остальной частью содержания. у меня было это в течение секунды, когда я вынул секцию из навигатора и поместил строку большой-12 вокруг нее, но тогда она не была исправлена, и когда я добавил, что она оставила ее выровненной, но она все еще была размером, который мне нужен. я попробовал margin: 0 auto; и это тоже не сработало. так что теперь я в тупике.

/* TOP BAR */ 
.top-bar { 
    background-color: #cc0b12; 
    position: fixed; 
    width: 100%; 
    display: block; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 200; 
} 
.top-bar-section .has-form { 
    background-color: #cc0b12; 
} 
.headerbar { 
    width: 100%; 
    margin: 0 auto; 
} 
.redbar { 
    z-index: 300; 
    margin: 0 auto; 
} 
input[type="text"] { 
    margin-top: 6px; 
    height: 31px; 
    font-family: Lato; 
    float: left; 
    margin-left: -28px; 
} 
.magglass { 
    height: 15px; 
    margin-left: -23px; 
    margin-top: 13px; 
} 
.top-bar input { 
    position: static; 
    margin-top: 7px; 
} 
.help { 
    margin-top: -40px; 
    float: right; 
    font-family: 'PT Sans', sans-serif; 
    margin-right: -23px; 
} 
.help a { 
    color: white; 
    text-decoration: none; 
    float: right; 
    padding-right: 15px; 
    font-weight: bold; 
    margin-top: 5px; 
    font-size: .9em; 
} 
.cart { 
    float: right; 
    width: 22px; 
    padding-top: 6px; 
    margin-right: 5px; 
} 
/* /TOP BAR */ 

<div class="headerbar"> 
<div class="row hide-for-small fixed redbar"> 
<div class="large-12"> 
<section class="top-bar-section"> 

<!-- search bar --> 
<div class="has-form"> 
    <div class="row collapse"> 
    <div class="large-3 small-4 columns"> 
     <input type="text" placeholder="Search..."> 
     <a href="#"><img src="img/magglass.png" class="magglass"/></a> 
    </div> 
    </div> 
</div> 
<!-- /search bar --> 

<div class="right"> 
    <div class="help"> 
    <!-- set backwards for right float --> 
    <a href="#">CART (0)</a><img src="img/cart.png" class="cart"/> 
    <a href="#">LOG IN</a><img src="img/login.png" class="cart"/> 
    <a href="#">HELP CENTER</a><img src="img/HelpCenter.png" class="cart"/> 
    </div><!-- /help --> 
</div><!-- /right --> 

</section> 
</div> 
</div> 
</div> 

Answer 1

.large-12 { 
    background-color: #cc0b12; 
} 
.top-bar-section { 
    width: 80%; 
    margin: 0 auto; 
} 

Я надеюсь, что это может помочь вам.