Centering Two Divs

Question

In my document I have a header and a nav tab just below it with several li inside a ul. In my masthead, I have a .png logo. Now I would like to center the nav and its elements while creating two gutters in the document but more importantly I want the logo in the masthead to be positioned above the nav where the first li element begins.

In the terrible illustration below you can see what I am trying to achieve:

    |.PNG |  

    | li  |  li  |  li  |  li  |           

So far the list elements are centering, but I cannot left center the .png as shown above.

Thanks in advance for the help. \:D/

EDIT:

The HTML

<header><img src="whatever.png"</header>
<ul class="nav">
    <li>
        <a href="/">1</a>
    </li>
    <li>
        <a href="/">2</a>
    </li>
    <li>
        <a href="/">3</a>
    </li>
    <li>
        <a href="/">4</a>
    </li>
    <li>
        <a href="/">5</a>
    </li>
    <li>
        <a href="/">6</a>
    </li>
    <li>
        <a href="/">7</a>
    </li>
</ul>

The CSS:

header {margin: 0 auto; width: 100%;}
.nav {text-align: center;}

Answer 1

Make the header and nav the same width and fix the margins.

CSS

header,
nav
{
    width: 960px;
    margin: 0 auto;
}

HTML

<header>
    <img src="logo.png">
</header>
<nav>
    <ul>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
    </ul>
</nav>