Центриране на връзки към страници в навигационното меню

Бих искал навигационно меню с пълна ширина, като останалата част от страницата е с ширина 960px.

Връзките в менюто за навигация трябва да са центрирани над тялото с ширина 960px.

Кодът по-долу подравнява навигационното меню към лявата страна. Какво трябва да включа, за да са центрирани навигационните връзки?

HTML

<div class="nav">
   <ul>
      <li><a href="/bg#">About Us</a></li>
      <li><a href="/bg#">Our Products</a></li>
      <li><a href="/bg#">FAQs</a></li>
      <li><a href="/bg#">Contact</a></li>
      <li><a href="/bg#">Login</a></li>
   </ul>
</div>
<div class="wrapper">
   <div class="main">
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
   </div>
</div>

CSS

.wrapper {
    background-color: red;
    width: 960px;
    margin: 0 auto;
}

.nav {
    width: 100%;
    float: left;
    margin: 0 0 1em 0;
    padding: 0;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
}

.nav ul {
    list-style: none;
    width: 960px;
    margin: 0 auto;
    padding: 0;
}

.nav li {
    float: left;
}

.nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc;
}

.nav li:first-child a {
    border-left: 1px solid #ccc;
}

.nav li a:hover {
    color: #c00;
    background-color: #fff;
}