Problems with display nav properly

Question

1. I'm having trouble with adding space to the hovered "home" right/left.
2. 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> <a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Work</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact</a></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"> <a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Work</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact</a></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;
}