How can I take my navigation to the right of screen? - css

Question

I can't put my navigation menu to the right of screen. I used a lot of CSS but so it's a bit hard to find where is my mistake.
This is my html code:
<div id="main-container">
<div id="content">
<div id="header">
<ul id="nav">
<li >Nav 1</li>
<li>Nav 2</li>
<li class="selected">Nav 3</li>
<li>Nav 4</li>
</ul>
</div>
<div id="pictures">
</div>
</div>
This is the CSS i have trouble with:
#main-container {
}
#content {
background-color: #FFAA00;
background: url(images/table-surface-2-resized.jpg) repeat-x #000000;
width: 800px;
height: 600px;
border-radius: 5px;
}
#header {
background-color: #FFD200;
width: 800px;
height: 26px;
}
#pictures {
background-color: #A64D00;
width: 760px;
height: 540px;
border: 2px solid white;
border-radius: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 14px;
}
/* TABS WITH ROUND, OUT BORDERS */
#nav {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
line-height: 24px;
height: 26px;
overflow: hidden;
font-size: 12px;
font-family: verdana;
position: relative;
}
#nav li {
border: 1px solid #AAA;
background: #D1D1D1;
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
display: inline-block;
position: relative;
z-index: 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 20px;
}
#nav li.selected {
background: #FFF;
color: #333;
z-index: 2;
border-bottom-color: #FFF;
}
#nav:before {
position: absolute;
content: " ";
width: 100%;
bottom: 0;
left: 0;
border-bottom: 1px solid #AAA;
z-index: 1;
}
#nav li:before,
#nav li:after {
border: 1px solid #AAA;
position: absolute;
bottom: -1px;
width: 5px;
height: 5px;
content: " ";
}
#nav li:before {
left: -6px;
border-bottom-right-radius: 6px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 #D1D1D1;
}
#nav li:after {
right: -6px;
border-bottom-left-radius: 6px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #D1D1D1;
}
#nav li.selected:before {
box-shadow: 2px 2px 0 #FFF;
}
#nav li.selected:after {
box-shadow: -2px 2px 0 #FFF;
}
#nav a {
color: black;
text-decoration: none;
}
/* END TABS WITH ROUND, OUT BORDERS */

Answer 1

try out this css (addition)
#nav {
padding: 0 10px;
float:right;
}
here is working link

Answer 2

Fixed: http://dabblet.com/gist/3435951
Float #nav to the right, give it a right margin, remove overflow: hidden from it and add it on the #header.