Center a menu across top of webpage

Question

Firstly, here is a Fiddle and here's the HTML & CSS:

<div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">
            <li class="current-item"><a href="#">Home</a>
            </li>
            <li>    <a href="#">Info <span class="arrow">&#9660;</span></a>

                <ul class="sub-menu">
                    <li><a href="#">Rehearsal Dinner</a>
                    </li>
                    <li><a href="#">Wedding</a>
                    </li>
                    <li><a href="#">Reception</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Photos</a>
            </li>
            <li><a href="#">Directions</a>
            </li>
            <li><a href="#">RSVP</a>
            </li>
        </ul>
    </nav>
</div>
<img src="http://placekitten.com/g/800/600" alt="Snow" class="background">
<footer></footer>

CSS:

body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: rgb(231, 242, 208);
    width: 960px;
    padding-top: 0;
    margin: 0 auto;
}

.clearfix:after {
    display: block;
    clear: both;
}

h1 {
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 10px;
    margin: 0px;
    width: 100%;
    height: 50px;
    background-color: #3300EE;
}

.background {
    width: 100%;
    margin-left: 0%;
    margin-top: 100px;

}

/* Menu Outline */
.menu-wrap {
    width: 100%;
    background-color: rgb(150, 150, 150);
    text-align: center;
    position: fixed;
    top: 0px;
    left: 0px;

}

.menu {
    width: 100%;
    margin: 0 auto;
}

.menu li {
    margin: 0px;
    list-style: none;
    display: inline;
}

.menu a {
    transition: all linear 0.15s;
    color: black;
    text-decoration: none;
    display: inline-block;
    padding: 10px;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration: none;
    color: black;
}

.menu .arrow {
    font-size: 11px;
    line-height: 0%;
}

.menu > ul > li {
    float: left;
    display: inline-block;
    position: relative;
    font-size: 19px;
}

.menu > ul > li > a {
    padding: 10px 40px;
    display: inline-block;
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background: rgb(120, 214, 126);
}

.sub-menu {
    width: 160%;
    padding: 5px 0px;
    position: absolute;
    text-align: left;
    top: 100%;
    left: 0px;
    z-index: -1;
    opacity: 0;
    trasition: opacity linear 0.15s;
    background: rgb(120, 214, 126);
}

.menu li:hover .sub-menu {
    z-index: 1;
    opacity: 1;
}

.sub-menu li {
    display: block;
    font-size: 16px;
}

.sub-menu li a {
    padding: 10px 30px;
    display: block;
}

.sub-menu li a:hover, .sub-menu .current-item a {
    background: gray;
}

footer {
    height: 1000px;
}

What I'd like to do is have the menu across the top centered across the screen instead of being indented by a certain amount from the left as it currently is. Also, would it be possible to center the menu vertically as well? I kinda fudged that one for the time being by increasing padding-bottom to 10px but I'm sure there's a better, more solid solution than that.

I got the code for the menu bar from this blog post if you wish to see the menu's settings before I altered them slightly.

Answer 1

Just remove the float:left from your .menu > ul > li rule.

jsFiddle example