Центрирование ссылок на страницы в меню навигации

Я хотел бы, чтобы меню навигации во всю ширину экрана имело оставшуюся часть страницы шириной 960 пикселей.

Ссылки в меню навигации должны располагаться по центру над телом шириной 960 пикселей.

Приведенный ниже код выравнивает меню навигации по левой стороне. Что мне нужно включить, чтобы навигационные ссылки располагались по центру?

HTML

<div class="nav">
   <ul>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Our Products</a></li>
      <li><a href="#">FAQs</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">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;
}