Full-width Nav bar centered-right with content area

Question

I'm having trouble with centering my full-width navbar with my fixed content area. The ul changes with browser or resolution.

here is a fiddle with my problem:

http://jsfiddle.net/fwyNy/

subject site

css:

#topribbon{
width: 100%; 
height: 30px; 
background-color: #AA1119 ; 
margin: -11px 0px 1em 0px; 
position: fixed; 
z-index: 9999; 
}
#topribbon ul{
width:auto;
padding-top:5px;
margin:0px 385px 0px auto;
float:right;
}

#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;

}

and here is the 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>+1-800-555-5555</li>
    </ul>

Answer 1

You should give the inner ul a position:relative, a width and then use margin: 0 auto

position:relative;
margin:0 auto;
width:980px; (for example)

http://jsfiddle.net/fwyNy/2/ (stretch the space of the 'result')