Can't get one div completely to the right

I am looking for help regarding a <div> problem. In the header section I have a logo, facebook (button) and my menu. The facebook button and the logo are in the right place, however I cannot manage to get the menu in the right place. I want to it to be to the right side, sticking to the right side of the browser.

I hope someone is willing to help me.

<div id="topContainer">
    <div id="centerContainer">
        <a href="index.html" class="logo fl"><img src="images/logoMAIN.png" alt="Grand Cafe de Reebok" /></a>

        <div id="social">
            <a href="https://www.facebook.com/GrandCafeDeReebok?fref=ts"><img src="images/Facebook.png" /></a>
        </div> <!-- End social -->          

        <div id="navigation">
            <ul class="nav">
                <li class="active"><a href="index.html"><span>de Reebok</span></a></li>
                <li><a href="menu.html"><span>Menu</span></a></li>
                <li><a href="reserveer.html"><span>Reserveer</span></a></li>
                <li><a href="openingstijden.html"><span>Openingstijden</span></a></li>
                <li><a href="arrangement.html"><span>Arrangement</span></a></li>
                <li><a href="fotos.html"><span>Foto's</span></a></li>
            </ul> 
        </div> <!-- End navigation -->
    </div> <!-- End centerContainer -->
</div> <!-- End topContainer -->

The CSS file:

#centerContainer {
width: 100%;
height: 280px;
margin: 0 auto;}

.logo {
float: left; 
margin: 58px 36px 33px 85px;
display: block;
position: relative;
height: 200px;
width: 180px;}

#social {
float: right;
margin: 20px 30px 0 0;}

#navigation ul li {
text-decoration: none;
text-transform: uppercase;
display: inline;
font-family: Arial;
font-size: 16px; 
text-align: center;}

#navigation ul li a {
margin-right: 18px;
line-height: 60px;
margin-left: 3px;}

#navigation ul li a:hover {
color: #fff;}

#navigation ul li.active a {
color: #fff;}

#navigation {
float: right;
margin: 90px 0px 77px 0px;
background-color: rgba(0,0,0,0.41);
width: 680px; 
padding: 15px;
height: 70px;
position: absolute;
clear: both;}

#mainContainer {
background-image: url(../images/mainContainer-bg.png);
padding-top: 20px;
margin-top: 20px;
height: 462px;
-webkit-box-shadow: 0 12px 40px -6px black;
   -moz-box-shadow: 0 12px 40px -6px black;
        box-shadow: 0 12px 40px -6px black;
position: relative;
overflow: hidden;
width: 100%;}


2 Solutions
Solution

Your #navigation element already has float: right and position: absolute. So just adding right: 0px should be enough.

#navigation {
    float: right;
    right: 0px; /*Added this line*/
    margin: 90px 0px 77px 0px;
    background-color: rgba(0, 0, 0, 0.41);
    width: 680px;
    padding: 15px;
    height: 70px;
    position: absolute;
    clear: both;
}

Fiddle

Solution

Try below styles:

 #navigation{
    position:fixed;
    right:0px;
    top:0px;
    height:100%;
    width:100px; /* According to your needs*/
 }

Now navigation will always stick to right side of screen