Natwerk Designs - I have been working on this css navigation bar. I have looked everywhere and I can not center. Help?

I have been working on this css navigation bar. I have looked everywhere and I can not center. Help?

I would like it top centered. here is the entire html code: <html> <head> <title>Test Background center.</title> </head> <body>  <ul id="menu"> <li class="logo"> <img style="float:left;" alt="" src="http://i886.photobucket.com/albums/ac63/Sk8rjwd/Logo-1.jpg"/> <ul id="main"> <li>Welcome to the <b>Creative Design Salon</b> website!</li> </ul> </li> <li><a href="Home">Home</a> <ul id="Home"> </ul> </li> <li><a href="#">Services</a> <ul id="Services"> <li><a href="#">Hair</a></li> <li><a href="#">Nails</a></li> <li><a href="#">Skin Care</a></li> <li><a href="#">Cosmetics</a></li> <li><a href="#">Waxing</a></li> <li><a href="#">Eyebrow Dyeing/Henna</a></li> <li><a href="#">Threading</a></li> </ul> </li> <li><a href="#">Product Lines</a> <ul id="Product Lines"> <li><a href="#">Paul Mitchell</a></li> <li><a href="#">Aquage</a></li> <li><a href="#">Redken</a></li> <li><a href="#">Back To Basics</a></li> <li><a href="#">Hempz</a></li> <li><a href="#">OPI Nail</a></li> <li><a href="#">TiGi-Bedhead Skin Care</a></li> <li><a href="#">BioElements Skin Care</a></li> <li><a href="#">Sabastian's Hair Spray</a></li> </ul> </li> <li><a href="#">About us</a> </li> <li><a href="#">Photo Galleries</a> </li> <li><a href="#">Directions</a> </li> <li><a href="#">Virtual Tour</a> </li> </ul> </li> </ul> <!----css----!> <style type=text/css> /* menu */ #menu{ margin: auto; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block; z-index:1000; position: relative; text-align: center; } #menu a { color:#fff; text-decoration:none; } #menu > li {background:#172322 none repeat scroll 0 0; cursor:pointer; float:left; position:relative; padding:0px 10px;} #menu > li a:hover {color:#B0D730;} #menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;} /* sub-menus*/ #menu ul { padding:0px; margin:0px; display:block; display:inline;} #menu li ul { position:absolute; left:-10px; top:0px; margin-top:45px; width:150px; line-height:16px; background-color:#172322; color:#0395CC; /* for IE */ display:none; } #menu li:hover ul { display:block;} #menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px; border-top: dotted 1px #606060; list-style-type:none; } #menu li ul li:first-child { border-top: none; } #menu li ul li a { display:block; color:#0395CC; } #menu li ul li a:hover { color:#7FCDFE; } /* main submenu */ #menu #main { left:0px; top:-20px; padding-top:20px; background-color:#7cb7e3; color:#fff; z-index:999;} </style> <!------css-------!> <p><font color=red><font size=12> This is a test. </p></font color=red></font size=12>

Public Comments

Put it in a div and set a width/height. You can not center anything without a width except text. Then use this to center: margin: 0 auto; Be sure to use a width less than 100%. In fact, put a temporary border around the div container to see where you need to tweak the width/height to contain your nav menu. Might have to remove some of that CSS for the menu to get it right. Ron