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

Question

Below is my html
<div id="wrap">
<ul class="navbar">
<li>Home</li>
<li>Franchises
<ul>
<li>elroyz Xpress</li>
<li>skye stickbeetles</li>
<li>Juddamania</li>
</ul>
</li>
<li>Fixtures
<ul>
<li>Round 1</li>
<li>Round 2</li>
<li>Round 3</li>
<li>Round 4</li>
<li>Round 5</li>
</ul>
</li>
<li>Free Agents
<ul>
<li>Adelaide</li>
<li>Brisbane</li>
<li>Carlton</li>
</ul>
</li>
</ul>
</div>
below is my 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 a {
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 a {
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 only new to html and css so im having abit of trouble getting the nav bar to center in the page. by center i mean the actual list items to center in the page not on the left hand side like it is now. any help is greatly appreciated thanks!

Answer 1

You need to add width and margin auto to your navbar I made a little jsFiddle
.navbar {
height: 35px;
width:610px;
margin:0 auto;
}
jsFiddle

Answer 2

You have to set the width of wrap to something in pixels like this
#wrap {
width:750px; // Set it according to your need
margin: 0px auto; // i also changed this
height: 37px;
z-index:99;
position:relative;
background-color:#F00;}
and also the margin to 0px auto
Here is the JSfiddle

Answer 3

.navbar {
height: 35px;
padding:0;
position:relative;
margin-left:auto;
margin-right:auto;
width: 100px;// change this to desired width
border-right: 1px solid #1c1c1c;
}