Vertical Bootstrap Navbar Button Misaligned - html

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">
<img class='squidanim' src='https://www.glowingsquid.com/images/squid.gif' /><span>Home</span>
</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.