基础5中心对齐顶栏

Question

我似乎无法将顶栏与其他内容对齐。当我把导航部分从导航部分中取出并放大12行时，我已经有了一段时间，但是它没有被修复，当我添加固定时它左对齐它但它仍然是我需要的尺寸。我试过保证金：0自动;那也没有用。所以现在我很难过。

/* 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;
}

我希望这可以帮到你。