Problems with display nav properly - html

Question

I'm having trouble with adding space to the hovered "home" right/left.
Adding proper spacing so after the hovered section of "home" appears that about and the other pages would follow.
CSS:
nav {
width:460px;
height:50px;
background-color:#0066ff;
float: left;
margin: 15px 0 0 324px;
position: fixed;
}
nav ul {
margin: 0;
padding: 0;
position: fixed;
width:493px;
border: 1px solid green;
}
nav li {
float: left;
text-align: left;
margin:0;
padding: 0 0 0 24px;
display: block;
width: 51px;
height: 50px;
}
nav li:first-child {
float: left;
text-align: left;
margin:0;
padding: 0 15px 0 0;
display: block;
height: 50px;
}
nav a:first-child {
margin: 0;
padding: 0;
height: 50px;
min-width:51px;
display:block;
position: fixed;
line-height:50px;
float: left;
text-align: center;
}
nav a {
margin: 0;
padding: 0;
height: 50px;
min-width:51px;
display:block;
position: fixed;
line-height:50px;
float: left;
text-align: center;
}
nav ul li a:link, nav ul li a:visited {
text-decoration: none;
color:#fff;
display:block;
}
nav ul li a:hover, nav ul li a:active {
background: #929292;
text-decoration: none;
display:block;
}
This problem has been giving me headaches for hours.
Link Update
The blue space beside about can't happen.

Answer 1

Nick, your issue is in the li:first-child selector. Specifically the padding attribute, where it clears the padding, where you're missing the spacing.
Many of your :first-child selectors are redundant, and don't need to be re-specified.
Mixing position:fixed with float:left is generally not a good idea as your CSS will be fighting layout structure.
You only need a position:fixed for the main container, the rest the nav's children will be relative to that.
There's a lot of unnecessary padding and such, you should use your browser's DOM inspector to play with the layout.
Check this JSFiddle that's cleaned it up.

Answer 2

A lot of the time, a small <div> is placed to the left of the "home" link to push it over like so:
#fillerdiv{
width:20px;
background-color:#0066ff;
}
then you could place it like so:
<nav>
<ul>
<div id="fillerdiv"></div>
<li> Home</li>
<li>About</li>
<li>Work</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
That produces this:
Or you could give the "home" button a specific class and add extra padding for it alone.
#home{
padding-left:20px;
}
And the HTML:
<nav>
<ul>
<li id="home"> Home</li>
<li>About</li>
<li>Work</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>

Answer 3

I played around your code a bit and tried to simplify it. I hope you don't mind.
JSFiddle
/* styles.css */
nav {
float: left;
background: #0066ff;
border: 1px solid green;
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
float: left;
display: block;
}
nav a {
margin: 0;
padding: 0;
padding:20px;
color:#fff;
text-align: center;
}
nav ul li a:link, nav ul li a:visited {
text-decoration: none;
display:block;
}
nav ul li a:hover, nav ul li a:active {
background: #929292;
text-decoration: none;
display:block;
}