title: foundation 5 center align top bar
body: <p><img src="https://i.stack.imgur.com/rrbVE.jpg" alt="top-bar problem"></p>
  
  <p>i can't seem to align the top bar with the rest of the content. i had it for a sec when i took the section out of the nav and put row large-12 around it, but then it wasn't fixed and when i added fixed it left aligned it but it was still the size i needed. i tried margin: 0 auto; and that didn't work either. so now i'm stumped.</p>
  
  <pre><code>/* 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 */
  
  &lt;div class="headerbar"&gt;
  &lt;div class="row hide-for-small fixed redbar"&gt;
  &lt;div class="large-12"&gt;
  &lt;section class="top-bar-section"&gt;
  
  &lt;!-- search bar --&gt;
  &lt;div class="has-form"&gt;
    &lt;div class="row collapse"&gt;
      &lt;div class="large-3 small-4 columns"&gt;
        &lt;input type="text" placeholder="Search..."&gt;
        &lt;a href="#"&gt;&lt;img src="img/magglass.png" class="magglass"/&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /search bar --&gt;
  
  &lt;div class="right"&gt;
    &lt;div class="help"&gt;
      &lt;!-- set backwards for right float --&gt;
      &lt;a href="#"&gt;CART (0)&lt;/a&gt;&lt;img src="img/cart.png" class="cart"/&gt;
      &lt;a href="#"&gt;LOG IN&lt;/a&gt;&lt;img src="img/login.png" class="cart"/&gt;
      &lt;a href="#"&gt;HELP CENTER&lt;/a&gt;&lt;img src="img/HelpCenter.png" class="cart"/&gt;
    &lt;/div&gt;&lt;!-- /help --&gt;
  &lt;/div&gt;&lt;!-- /right --&gt;
  
  &lt;/section&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>