Something is moving my drop down nav bar to the right - html

Question

When I hover over the html section the html & css nav option is moved to the right for some reason, how do I get it to align with the other nav options.
http://codepen.io/anon/pen/bEqPRQ
#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 > ul > li {
display: inline-block;
margin-right: 2%;
padding: 4.375em 1.250em 4.375em 1.250em;
}
#nav > ul > li > a {
text-decoration: none;
color: #000000;
}
#nav > ul > li > a:hover {
color: #00c5a2;
}

Answer 1

Your <ul> has a default styling (padding-left) which has to be removed. Adding
#nav ul li ul.dropdown {
padding-left: 0;
}
moves your text to the left.
You should also check your CSS, vertical-align: left and left: 400 (doesn't have a unit) aren't valid and won't work.

Answer 2

You can solve the problem adding padding left = 0 in the css of #nav ul li ul.dropdown :
#nav ul li ul.dropdown {
padding-left: 0;
}

Answer 3

Try changing the .dropdown style as follows:
#nav ul li ul.dropdown {
background-color: #000000;
display: none;
position: absolute;
z-index: auto;
left: 0;
vertical-align: left;
}
Then the parent li position to relative:
#nav > ul > li {
display: inline-block;
margin-right: 2%;
padding: 4.375em 1.250em 4.375em 1.250em;
position: relative;
}
This ensures the dropdown always positions itself absolute to its parent (the li).
Also adding padding: 0 to the dropdown ul:
#nav ul li:hover ul.dropdown {
display: block;
padding: 0;
}
Fiddle: https://jsfiddle.net/04zospoj/