make nav bar in header without absolute position - css

Question

I am not sure how to have the nav bar inside the header its gone outside of the box and now has no background color. I had it position absolute before and it worked but I am trying to find another alternative.I want the logo to also overlap the nav and the nav stretch out to the full width of the header
It is turning up in my browser like this
it looks different in the JS fiddle
here is my code:
http://jsfiddle.net/9nspQ/
HTML
<header>
<img src="../assets/images/logo.png" alt="">
<nav>
<ul>
<li>Tours & Prices</li>
<li>Standard Flights</li>
<li>Meet the Staff</li>
<li>Charters</li>
</ul>
</nav>
</header>
CSS
header {
height: 100px;
background-color: #001D5D;
}
nav {
right:0;
bottom:0;
padding:10px;
background-color:#1CCEAE;
}
nav ul {
margin-left: 500px;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav li a {
text-decoration: none;
font-size: 1em;
color:white;
}

Answer 1

Just FYI: right:0;bottom:0; have no effect if there is no position assigned
You have many elements that I am not too sure what they are for. I assume you have more code that you're dealing with on your application.
Try this:
.container {
width: 960px;
margin:0 auto;
background-color: blue;
}
#logo{
height:100px;
width:100px;
z-index:10;
top:10px;
position:absolute;
}
header {
padding-top:50px;
height: 70px;
background-color: #001D5D;
}
nav {
width:960px;
padding:10px 0 10px;
text-align:right;
background-color:#1CCEAE;
}
nav li {
display: inline-block;
}
nav li a {
text-decoration: none;
font-size: 1em;
color:white;
}
DEMO
HERE IS THE WAY I WOULD DO IT:
#logo{
height:100px;
width:100px;
z-index:10;
top:15px;
left:30px;
position:absolute;
}
header {
width:100%;
height: 80px;
background-color: #001D5D;
}
ul {
width: 100%;
height:50px;
line-height:50px;
padding:0;
margin:0;
text-align:right;
background-color:#1CCEAE;
}
ul li {
display: inline-block;
padding-right:10px;
}
ul li a {
text-decoration: none;
font-size: 1em;
color:white;
}
DEMO