Trying to center align UL but the width defaults to 100%

[katsabidi]

http://anaya.sonikastudios.com/The HTML:\[code\]<div id="menubar" class="grid_12 alpha omega"> <ul id="menu"> <li><a href="http://stackoverflow.com/questions/10888970/#" title="Diamond Engagement Ring Sets">Engagement Sets</a></li> <li><a href="http://stackoverflow.com/questions/10888970/#" title="Diamond Solitaires">Solitaires</a></li> <li><a href="http://stackoverflow.com/questions/10888970/#" title="Diamond Three Stone Rings">Three Stone Rings</a></li> <li><a href="http://stackoverflow.com/questions/10888970/#" title="Diamond Anniversary Rings">Anniversary Rings</a></li> <li><a href="http://stackoverflow.com/questions/10888970/#" title="Diamond Gentleman's Rings">Gent's Rings</a></li> <li><a href="http://stackoverflow.com/questions/10888970/#" title="Diamond Earrings">Earrings</a></li> <li><a href="http://stackoverflow.com/questions/10888970/#" title="Diamond Pendants">Pendants</a></li> <li><a href="http://stackoverflow.com/questions/10888970/#" title="Diamond Bracelets">Bracelets</a></li> </ul> </div>\[/code\]Very simple, really. Then we have the CSS:\[code\]#menubar { height: 22px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; background-image: url('/images/menubar_bg.png'); background-repeat: repeat-y; text-align: center;}#menu { padding:0px; height: 20px; list-style:none; white-space: nowrap; position: relative; margin: 1px auto;}#menu li { display:inline; padding: 0px 11px 0px 10px; margin: 5px 0px; list-style:none; position: relative !important; background-image: url('/images/menu_item_tick.png'); background-position: right center; background-repeat: no-repeat; text-align: center; float: left;}\[/code\]I tried putting width:auto; on the UL element (#menu) but to no use... I want the UL element ot be centered and NOT 100% of the width automatically - it should adjust to the content, and the # of LI elements in it.