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

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">
<img class="logo" src="img/onewaylogo.png">
<nav>
Home
About
Let's Partner
Contact
</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)
...
}