Margin 0 auto wont work as intended

The title says it all for some reason my margin 0 auto is not centering my margin: 0 auto; wont center my ul inside of the nav element. Any help would be greatly appreciated. I already took a look at other posts on stack regarding the same issues, and couldn't fix my issue.

CSS

/* Sets the body to take up 100% of the width of the browser */
body {
    width: 100%;
    background: #444444;
    margin: 0px;
}

#container{
    width: 100%;
}
header {

    margin-left: -10px;
    margin-top: -10px;
    padding: 0 20px;
    width: 25%;
    height: 12000px;
    background: url("imgs/headerBg.jpg") repeat-y;
    float: left;
}

nav{
    width:60%;
    margin: auto;
}

nav ul{
width: 70%;
list-style-type: none;
text-align: center;
margin: 0 auto;
}

nav ul li{
    height: 45px;
    padding: 0px;
    margin: 0px;
    display: inline-block;
    border-top: 3px double #fff;

}

nav ul li a{
text-decoration: none;
text-align: center;
font-weight: bold;
color: #ffffff;
font-size: 2.5em;
}

#homepage{
height: 120000px;
width: 65%;
float: left;
}

#homepage li{
    list-style-type: none;
    height: 14.20%;

}

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Skull Alcohol &copy;</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="container">


    <header>
        <nav>
            <ul>
                <li><a href="">home</a></li>
                <li><a href="">recipes</a></li>
                <li><a href="">our products</a></li>
                <li><a href="">shop</a></li>
                <li><a href="">contact</a></li>
            </ul>
        </nav>
    </header>

    <section id="homepage">
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
    </section>

    <footer>
        <div id="privacy"><a href=""></a>privacy</div>
        <div id="tos"><a href="">terms of service</a></div>
    </footer>

</div>
</body>
</html>

Solution

It looks like your ul is actually centered, but because ul has a default padding on the left side it appears more to the right.

Try adding padding: 0 to your nav ul rule.