Centering my logo over the custom header and right aligning my nav

Question

If you are viewing it on JSFiddle you'll have to make the results window bigger to see what I am talking about. The logo should be right over top of the half circle and header and the nav should be centered in the header and right aligned.

Here is the fiddle - http://jsfiddle.net/sPEXp/1/

HTML

    <div class="header">
        <div class="container">
            <a href="#"><img class="logo" src="img/onewaylogo.png"></a>
            <nav>
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Let's Partner</a>
                <a href="#">Contact</a>
            </nav>
        </div>
    </div>

CSS

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #f6f6f6;
    z-index: 10000;
    height: 100px;
}

.header .container {
    position: relative;
    height: 100px;
    width: 85%;
    margin: 0 auto;
    text-align: center;
}

.header:after {
    content: '';
    position: relative;
    bottom: 0;
    display: block;
    margin: 0 auto;
    background: #f6f6f6;
    width: 150px;
    height: 75px;
    border-radius: 0 0 75px 75px;
}

.header .logo,
.header nav a {
    line-height: 100px;
}

.header nav {
    float: right;
    position: relative;
    width: 320px;
}


.logo {
    position: relative;
    top: 50px;
    display: inline-block;
    width: 150px;
    height: 100px;
    z-index: 100000;
    margin: 0 auto;
}

.header nav a {
    color: #aaa;
    font-weight: 700;
    margin: 0 0 0 20px;
    font-size: .95em;
}

.header nav a:hover {
    color: #333;
}

Answer 1

Fiddle Working

You can center elements by setting its width and position to absolute In this case:

.logo {
    position: absolute;
    margin: 0 50%;
    width: 150px;
    left: -75px; // total width half  (75px)
    ...
}