Centered Menu w/ CSS

jsFiddle

I need to center my fixed header nav that is using an unordered list. The middle list item is left empty as I am putting a background image there in its place.

Right now it "looks" centered though if you rubberband the browser window you can see that it is not. I can achieve almost middle by reducing the width from 960px to ~780px but I don't want to have to do that.

I'm sure I'm overlooking something simple here. Thanks!

HTML:

<header>
    <nav>
        <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Services</a></li>
            <li class="logo"></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}


body{
    background-color: #ebebeb;
}

nav {
    width: 960px;
    margin: 0 auto;
}

ul{
    list-style-type: none;
    text-align: center;
}

li{
    display: inline-block;
    height: 120px;
    float: left;
    text-align: center;
    line-height: 120px;
    margin-right: 30px;
}

.logo {
    height: 130px;
    width: 164px;
    background:url(http://samaradionne.com/img/typeBlack.png) no-repeat;
}

section.stretch{
    float: left;
    height: 1500px;
    width: 100%;
}

header{
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #aaaaaa;
    position: fixed;
    z-index: 10;
    text-align: center;
}

header a{
    color: #969696;
    text-decoration: none;
    font-family:  sans-serif;
    text-transform: uppercase;
}

Solution

Could also use an inline-table

ul {
  display:inline-table;
}

http://jsfiddle.net/2GG7Y/13/

You could take the CSS table a step further with

li {
  display:table-cell;
}

Though, these elements will work in most browsers, you may want to cross test for fallbacks.