CSS Center full width navagation bar <ul> content - html

Question

I am trying to center then float:right my top fixed navbar with the content area of my page. Currently the navbar is floated right but is not centered with my content area.
Click to view my subject site.
CSS
#topribbon{
width: 100%;
height: 30px;
background-color: #AA1119 ;
margin: -11px 0px 1em 0px;
position: fixed;
z-index: 9999;
}
#topribbon ul{
padding-top:5px;
text-align:right;
float:right;
position:relative;
margin:0 auto;
width:980px;
}
#topribbon ul li{
float:right;
color:white;
padding:0 10px 0 10px;
list-style:none;
display:block;
line-height:20px;
text-align:center;
cursor:pointer;
width:auto;
}
#topribbon ul li:hover{
color:#5C8FA5;
HTML
<div id="topribbon"> <ul>
<li>Free Ground Shipping on all orders over $99!</li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>[phone]</li>
</ul>
</div>

Answer 1

My first guess is the width of ul element doesn't work.
Try this instead
<div id="topribbon">
<div class="ribbonwrapper" style="width:980px;margin:0 auto;">
<ul>
<li>Free Ground Shipping on all orders over $99!</li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>[phone]</li>
</ul>
</div>
</div>
Put the style of .ribbonwrapper into CSS to make the code tidy :) then you can remove irrelevant width & margin property of #topribbon ul

Answer 2

I'm not sure I'm entirely clear on what you're trying to do, but if what you want is to float:right the UL and then have all the LI's within it centered, you could do this:
#topribbon ul { float:right; text-align: center; }
#topribbon ul li { display: inline-block; }
Be sure to remove the float:right; from the li style block.
If you mean something else by "centered with my content area" can you explain more?

Answer 3

Try with float:none; on the #topribbon ul

Answer 4

Pretty confused what you mean exactly myself... Maybe this is what you want? jsFiddle
#topribbon {
width: 100%;
background-color: #AA1119;
margin: -11px 0px 1em 0px;
position: fixed;
z-index: 9999;
overflow:hidden;
}
#topribbon ul {
padding:10px 0 8px;
position:relative;
margin:0 auto;
width:980px;
background:red;
overflow:hidden;
}
#topribbon ul li {
color:white;
list-style:none;
display:inline-block;
line-height:20px;
cursor:pointer;
width:auto;
padding:0 10px 0 10px;
float:right;
}
#topribbon ul li:hover {
color:#5C8FA5;
}

Answer 5

like others have said use the ul below. I am just as stumped as you however, I am new so if my code is wrong then please feel free to tell me. Thanks
#topribbon ul { float:right; text-align: center; }
#topribbon ul li { display: inline-block; }