Cannot figure out how to center multiple links in a navigation bar using CSS

Question

I'm trying to center Link 1, Link 2, and Link 3 in the following page:

https://i.sstatic.net/CVWAy.png

Here is the relevant bit of html:

<a class="logo" href="#"><p>Logo</p></a>

<ul class="nav">
    <li><a class="link" href="#"><p>Link 1</p></a></li>
    <li><a class="link" href="#"><p>Link 2</p></a></li>
    <li><a class="link" href="#"><p>Link 3</p></a></li>
</ul>

and here's the css:

.link
{
    font-size: 1em;
    margin-left: 0;
    margin-right: 0;
    font-weight: none;
    text-decoration: none;
    color: #123456;
    display: inline-block;
    padding: 0 0;

}

.nav
{
    margin-left: 0;
    display: inline-block;
    margin-bottom: 5px;
    margin-top: 5px;
}

.nav li
{
    display: inline-block;
    margin: auto;
}

I've tried every combination of things that I can think of.

To be specific, I'm trying to center the links such that they are all evenly spaced out along the nav bar. Does anyone see what I'm doing wrong?

Edit:

jsfiddle link: http://jsfiddle.net/B362m/

Answer 1

Try this:

.nav
{
  display: inline-block;
  margin-left: 5%;
  margin-bottom: 5px;
  margin-top: 5px;
  text-align: center;
}

Working Fiddle