Why is text not positioned properly within list element?

Question

This is what the problem looks like:

Here is the mark up:

                    <nav class="padding_bottom">
                        <ul>
                            <li><a class="selected" href="#">Home</a></li>
                            <li><a href="#">Music</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </nav>

And the styling:

nav {
    height: 100%;
}

nav li {
    font-size: 3em;
    letter-spacing: -4.5px;
    text-transform: uppercase;
}

nav li:nth-child(2), 
nav li:nth-child(3) {
    margin-left: .25em;
}

nav a {
    color: #dddddd;
}

nav a:hover, .selected {
    color: black;
}

I can;t figure out why this is happening. I've played around wiht a lot of the styling elements to see if anything changed, but the problem persisted.

Answer 1

@MichaelPitluk:

It's caused by the -ve letter-spacing , if you remove it then the background color extends as expected. You may just need to add some padding or margin, whichever works best for your situation, to the <a> elements.

Example Fiddle

Answer 2

Try this please :

nav li {
    font-size: 3em;
    letter-spacing: -4.5px;
    text-transform: uppercase;
    padding: 10px;
    list-style:inside none;
    background-color:#CCC;
    display:inline-block;
}