Navbar row not vertically aligned

Question

I am trying to make a navbar which hides text on smaller screens. I cannot get the bar to align correctly!

http://jsfiddle.net/blisstdev/ZrA3u/10/

http://jsfiddle.net/blisstdev/ZrA3u/10/embedded/result/

As you can see, the left side is lower than the right!

Also, the first list element of the 'ul' on the left does not fill the size of the 'ul' container, yet all the other list elements do. Why is this?

Thank you very much!

<div class="navbar navbar-default navbar-fixed-top header" role="navigation">
    <div class="container-fluid header-top">
        <ul class="navbar-nav navbar-left pull-left list-inline contact-links">
          <li class="header-link-container"><a class="visible-xs call-link" href="tel:180042762687"><span class="glyphicon glyphicon-earphone"></span></a><span class="hidden-xs header-link-text">1-800-GARMANTS</span></li>

          <li class="header-link-container"><a class="to-do magento-add-in chat-link" href='****live chat**'><span class="glyphicon glyphicon-comment"></span><span class="hidden-xs header-link-text">Chat</span></a></li>
          <li class="header-link-container"><a class="magento-add-in email-link" href="mailto:ryan@garmants.com"><span class="glyphicon glyphicon-envelope"></span><span class="hidden-xs header-link-text">Email</span></a></li>
          </ul>

      <ul class="navbar-nav navbar-right pull-right list-inline account-and-cart-links">
        <li class="header-link-container"><a class="account-link" href="my-account.html"><span class="glyphicon glyphicon-user"></span><span class="hidden-xs header-link-text">My Account</span></a></li>
        <li class="header-link-container"><a class="cart-link" href="my-cart.html"><span class="glyphicon glyphicon-shopping-cart"></span><span class="hidden-xs header-link-text">My Cart</span></a></li>
      </ul>

    </div>
</div>

Answer 1

On small screens, the anchors are set to display: block, while this is not the case for the anchors in the right hand list. Just make sure to apply the same styles to each list and they will behave in the same way.

Answer 2

I updated you FIDDLE you need to set the same padding to the first <li> item in the left nav-bar like this

@media (min-width: 768px) {
  .contact-links.navbar-nav > li.header-link-container:nth-child(1) {
    padding-bottom: 15px;
    padding-top: 15px;
  }
}

should do it.