垂直引导导航栏按钮未对齐

Question

I'm working on a responsive navigation bar with Bootstrap for my website. I have it mostly figured out, except for one thing. On devices with screen width < ~775px , such that the buttons are stacked vertically instead of horizontally, the first one extends a bit to the left, misaligning it with the rest of the buttons. What is causing this, and how do I fix it?

JSFiddle: https://jsfiddle.net/w10cspvv/

HTML:

<div id="navbar">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <ul class="nav nav-pills nav-justified">
        <li role="presentation" class="active navbutton">
          <a href="/"><img class='squidanim' src='https://www.glowingsquid.com/images/squid.gif' /><span>Home</span></a>
        </li>
        <li role='presentation' class='active navbutton'>
          <a href='/about.php'><img class='squidanim' src='https://www.glowingsquid.com/images/squid.gif' /><span>About</span></a>
        </li>
        <li role='presentation' class='active navbutton'>
          <a href='/contact.php'><img class='squidanim' src='https://www.glowingsquid.com/images/squid.gif' /><span>Contact</span></a>
        </li>
      </ul>
    </div>
  </nav>
</div>

CSS:

body {
  background-color: black;
  font-size: 16pt;
  margin-top: 2em;
}

#navbar {
  border: .25em solid #00aeef;
  background-color: #00aeef;
  border-radius: 25px;
}

.navbar {
  margin-bottom: 0em;
}

.navbar-default {
  border-radius: 25px;
  border-color: #00aeef;
  background: #00aeef;
}

.main {
  font-family: Ubuntu, Tahoma, Geneva, sans-serif;
  margin-left: 6em;
  margin-right: 6em;
  text-align: center;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
  background-color: #7F00FF;
}

.squidanim {
  display: none;
}

.navbutton:hover a > .squidanim {
  display: block;
  height: 50px;
  position: absolute;
  z-index: 100;
}

.navbutton {
  padding-left: 2em;
  padding-right: 2em;
}

.nav > li > a {
  padding-top: 0;
  padding-bottom: 0;
}

.nav > li > a > span {
  padding-top: 10px;
  padding-bottom: 10px;
}

@media (max-width: 978px) {
  #navbar {
    margin-left: 2em;
    margin-right: 2em;
  }
  .main {
    margin-left: 1em;
    margin-right: 1em;
  }
  .navbutton {
    padding-left: 0;
    padding-right: 0;
  }
}

Answer 1

I have fixed this in this JSFiddle: https://jsfiddle.net/xpn779Lr/1/

Which overrides the default bootstrap rule

.nav-pills>li+li {
  margin-left: 2px;
}

to

.nav-pills>li+li {
  margin-left: 0;
}

FYI, this css rule has high specificity.

The plus sign mean that the style applies only to li's directly following another li. A plain "li" selector would apply the style to every li in the div with a "navpills" class.

See adjacent selectors on W3.org.