Centering a UL element..

[Diablosblizz]

Hi, I am having some troubles with centering a UL to the center of the page. I've tried setting the width to 100% and then setting margin to 50% of it but that doesn't seem to work. I am not sure how I can get this working. Here is the page:

http://logixcan.net/newlogix/

As you can see the navigation either goes off your screen or floats to the right. I am not sure why or how to fix it. Here's the HTML and CSS:

HTML:


<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Shared Hosting</li>

<li>Reseller Hosting</li>
<li>Contact Us</li>
<li>Live Support</li>
</ul>
</div>

and the css:


#nav {
width: 100%;
color: #FFFFFF;
background: url(images/navgradient.png);
height: 30px;
}

#nav ul {
width: 100%;
list-style: none;
margin-top: 0;
margin-left: 50%;
padding-top: 6px;
}

#nav li {
text-align: center;
float:left;
padding-left: 75px;
}


I have been trying to get this working for hours, and have no idea what I am doing wrong..

Thank you!

[bluewalrus]

Take off the margin-left:50% on the ul.

[Diablosblizz]

Removing the margin-left:50% just moves it back to the left hand side.

[bluewalrus]

That's what was making go off the screen/float to the right. To get it centered you could use margin: auto, but you've set your wrapper to width: 1300px;.

This would not center on my monitor because my monitor is 1200px and my browser about 950px so it would try and center at 650px where as on my monitor the size should be 475px. I think that is correct...