ul stretch across page

Question

I'm building a top navigation using the technique described here http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

My goal is that the background-color for the navigation stretches across the page, while the actual navigation links(ul) are centered.

        <nav>
            <ul>
                <li>
                    <a href="#">Mira Ishii</a></h1>
                </li>
                <li>
                    <a href="#">Portfolios</a></h2>
                <li>
                    <a href="#">Resume</a></h2>
                </li>
                <li>
                    <a href="#">Contact</a></h2>
                </li>
            </ul>
        </nav>

relevant CSS

    nav {
margin: 0 auto;
text-align: center;
background-color: #396b95;
    }
    nav ul{
position: relative;
list-style: none;
display: inline-table;
    }
/*this clearfix does nothing*/
nav ul:after{
    content: "";
    clear: both;
    display: block;
}
nav ul li {
    float: left;
}
    nav ul li:hover{
        background-color: #254662;
    }
        nav ul li:hover a {
            color: #efefef;
        }
    nav ul li a {
        display: block;
        color: #222;
        padding: 1em;
    }

When I put the background-color: #396b95; in the nav it stretches across the page, but there is a small(4 pixel) gap between the height of the ul and the nav. I can put the background-color: #396b95; on the ul, but then it doesn't stretch across the page.

My intuition tells me I'm not doing the clear-fix correctly, though maybe there's another solution

Answer 1

To eliminate any gap between the ul and the nav, clear out the margins/padding:

nav ul { margin: 0; padding: 0 }

Fiddle