Something is moving my drop down nav bar to the right
<p>When I hover over the html section the html &amp; css nav option is moved to the right for some reason, how do I get it to align with the other nav options.</p>

<p><a href="http://codepen.io/anon/pen/bEqPRQ" rel="nofollow">http://codepen.io/anon/pen/bEqPRQ</a></p>

<pre><code>#nav {
  list-style: none;
  text-align: center;
  padding: 1.250em 0 1.250em 0;
  background: #ffffff;
  font-size: 106.25%;
  font-family: 'Oxygen';
}

#nav li a {
  text-decoration: none;
  text-align: center;
  color: #FFF;
}

#nav ul li ul.dropdown {
  background-color: #000000;
  display: none;
  position: fixed;
  z-index: auto;
  left: 400;
  vertical-align: left;
}

#nav ul li:hover ul.dropdown {
  display: block;
}

#nav ul li ul.dropdown li {
  display: block;
}

#nav &gt; ul &gt; li {
  display: inline-block;
  margin-right: 2%;
  padding: 4.375em 1.250em 4.375em 1.250em;
}

#nav &gt; ul &gt; li &gt; a {
  text-decoration: none;
  color: #000000;
}

#nav &gt; ul &gt; li &gt; a:hover {
  color: #00c5a2;
}
</code></pre>