Having trouble centering a floated left nav nested inside a container

[slappyJmarsden]

Hello,

I have a nav menu that I would like centered in the middle of the page that has some float left properties. The nav menu is inside a container div. I have tried text-align: center; on the container div with no luck.

The container div also has a background that has a width of 100%. It was also suggested putting percentage values in the margin left and right but then it ruins the design of the div background.

How would I go about centering the nav within it's container div?

Here is the link:

link

Thanks

[Tanoru]

I think I see what you've tried to do with float:left; there.

To fix the problem I deleted all of your float:left; parts and added - display:inline; to #menu li and display:inline-block; to #menu a

See attached file.

test.css

[jordan.]

You can also do this:

#menu {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: ***px;


}

The changes here are:

1. removed float.

2. set margin to "0 auto"

3. change the width to px rather than %. ***px should be replaced with the exact width of the nav.