html - Why cant i get the nav bar to center on page? -

html - Why cant i get the nav bar to center on page? -

below html

<div id="wrap"> <ul class="navbar"> <li><a href="">home</a></li> <li><a href="">franchises</a> <ul> <li><a href="">elroyz xpress</a></li> <li><a href="">skye stickbeetles</a></li> <li><a href="">juddamania</a></li> </ul> </li> <li><a href="">fixtures</a> <ul> <li><a href="">round 1</a></li> <li><a href="">round 2</a></li> <li><a href="">round 3</a></li> <li><a href="">round 4</a></li> <li><a href="">round 5</a></li> </ul> </li> <li><a href="">free agents</a> <ul> <li><a href="">adelaide</a></li> <li><a href="">brisbane</a></li> <li><a href="">carlton</a></li> </ul> </li> </ul> </div>

below css

#wrap { width:100%; height: 37px; margin: 0; z-index:99; position:relative; background-color:#f00;} .navbar { height: 35px; padding:0; margin: 0; position:absolute; border-right: 1px solid #1c1c1c; } .navbar li { height: auto; width: 150px; float: left; text-align: center; list-style: none; font: normal bold 14px/1.2em arial, verdana, helvetica; padding: 0; margin: 0; background-color: #f00 } .navbar { padding: 10px 0; border-left: 1px solid #1c1c1c; border-right: 1px solid #1c1c1c; text-decoration: none; color: white; display: block; } .navbar li:hover, a:hover {background-color: #a4a4a4;} .navbar li ul { display: none; height: auto; margin: 0; padding: 0; } .navbar li:hover ul { display: block; } .navbar li ul li {background-color: #a4a4a4;} .navbar li ul li { border-left: 1px solid #1c1c1c; border-right: 1px solid #1c1c1c; border-top: 1px solid #1c1c1c; border-bottom: 1px solid #1c1c1c; } .navbar li ul li a:hover {background-color: #1c1c1c;}

im new html , css im having abit of problem getting nav bar center in page. center mean actual list items center in page not on left hand side now. help appreciated thanks!

you need add together width , margin auto navbar made little jsfiddle

.navbar { height: 35px; width:610px; margin:0 auto; }

jsfiddle

html css