html - zurb foundation 5 icon bar Text Misaligned -

i have weird issue text under icon bar not being centered under icons.

code example

<div class="row">   <div class="small-12 columns">     <div class="icon-bar five-up small">       <a class="item" href="/index.html">         <i class="fi-home"></i>         <div>           <label>home</label>         </div>       </a>       <a class="item" href="/cart.html">         <i class="fi-shopping-cart"></i>         <div>           <label>cart</label>         </div>       </a>       <a class="item" href="/pages/about-us">         <i class="fi-info"></i>         <div>           <label>about</label>         </div>       </a>       <a class="item" href="/pages/contact-us">         <i class="fi-mail"></i>         <div>           <label>contact</label>         </div>       </a>       <a class="item" href="/account/login">         <i class="fi-torso"></i>         <div>           <label>account</label>         </div>       </a>     </div>   </div> </div> 

i've tried center labels no luck. has had issue before. can't post screenshot since it's new account. contact label , account label seem start on left of icon , go right instead of start of actual icon box.

ok problems css in foundation. property "padding" here:

.icon-bar > * {    font-size: 1rem;    padding: 1.25rem; } 

to fix that, need add media query mobile. maybe like:

@media (max-width: 400px) {   a.item {     padding-left: 0;     padding-right: 0;     position: relative;     text-align: center;   } } 

change value 400px of resolution. if doesn't work because css style overrite another.. change padding-left , padding-right for:

padding-left: 0 !important; padding-right: 0 !important; 

check jsfiddle