css menu should be centered

[paulc201]

I have tried so many things but nothing has worked. All I want is the menu to stay centered on the page but it stays too far to the left. The css:

/* CSS Document 
Title:	Jennifer Liu-Cooper Consultant screen style
Author: 	Coopergraphix
*/

/* general---------------------------------------------------------- */
body {
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	font-family: "Gill Sans", Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
	text-align: center;
	color: #4f2900;
}

H2 {
	text-align: center
}

/* classes---------------------------------------------------------- */
#background {
	background-repeat: no-repeat;
	background-position: center top;
	position: relative;
	visibility: visible;
}
.centerpic {
	display:block;
	margin-left: auto;
    	margin-right: auto;
	position: relative;
	top: 0px;
	height: auto;
	width: auto;
	visibility: visible;
}
.ctrtxt {
	font-family: "Gill Sans", Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	color: #000000;
	visibility: visible;
	margin: 0 auto;
	width: 500px;
	height: auto;
	letter-spacing: normal;
	line-height: 120%;
	word-spacing: normal;
	font-size: 12pt;
}

/* page structure---------------------------------------------------------- */
#logo {
	display: block;
	background: url(../images/jlc_final_logo_150.png) no-repeat center;
	margin:auto;
	padding-top: 60px;
	top: 150px;
	height: 150px;
	width: 150px;
	visibility: visible;
}
#logo a {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
}

#signature {
	font-family: "Gill Sans", Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	color: #000000;
	padding-left: 220px;
	line-height: 150%;
	text-align: left;
}

.insideLogo {
display:block;
margin:0 auto;
text-indent:-9999px;
}

#inside {
	width: 550px;
	margin: 0 auto 0 auto;
	padding-top: 10px;
	font-size: 100%;
	line-height: 100%;
	text-align: justify;
}

#inside2 {
	font-family: "Gill Sans", Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	color: #000000;
	width: 550px;
	margin: 0 auto;
	padding-top: 0px;
	padding-left: 400px;
	font-size: 100%;
	line-height: 80%;
	text-align: left;
	
}

#inside3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	color: #000000;
	width: 750px;
	margin: 0 auto 0 auto;
	padding-top: 10px;
	font-size: 10pt;
	text-align: left;
	letter-spacing: normal;
	line-height: 100%;
	font-weight: lighter;
}

/* Menu---------------------------------------------------------- */
#menu {
	background: url(../images/main-bg.gif) repeat-x top left;
	height: 88px;
	width: 100%;
	
	position: absolute;
	top: 580px;
	text-align: center;
	left: 0px;
}
#menu ul {
	width: 950px;
	margin: 0 auto 0 auto;
}
#menu ul li {
	list-style-type: none;
	padding:0;
	float: left;	
}
#menu li a {
	outline: none;
}
#menu li#menuIntroduction {
	width: 157px;
	height: 88px;
	background: url(../images/menu-introduction.gif) 0px 0px no-repeat;
}
#menu li#menuIntroduction a {
	display: block;
	width: 157px;
	height: 88px;
	text-indent: -9999em;
	text-decoration: none;
}
#menu li#menuIntroduction a:hover {
	background: url(../images/menu-introduction.gif) 0px -88px no-repeat;
}
#menu li#menuConsulting {
	width: 213px;
	height: 88px;
	background: url(../images/menu-consultingServices.gif) 0px 0px no-repeat;
}
#menu li#menuConsulting a {
	display: block;
	width: 213px;
	height: 88px;
	text-indent: -9999em;
	text-decoration: none;
}
#menu li#menuConsulting a:hover {
	background: url(../images/menu-consultingServices.gif) 0px -88px no-repeat;
}
#menu li#menuBlog {
	width: 113px;
	height: 88px;
	background: url(../images/menu-blog2.gif) 0px 0px no-repeat;
}
#menu li#menuBlog a {
	display: block;
	width: 113px;
	height: 88px;
	text-indent: -9999em;
	text-decoration: none;
}
#menu li#menuBlog a:hover {
	background: url(../images/menu-blog2.gif) 0px -88px no-repeat;
}
#menu li#menuJennifer {
	width: 186px;
	height: 88px;
	background: url(../images/menu-JenniferCooper.gif) 0px 0px no-repeat;
}
#menu li#menuJennifer a {
	display: block;
	width: 186px;
	height: 88px;
	text-indent: -9999em;
	text-decoration: none;
}
#menu li#menuJennifer a:hover {
	background: url(../images/menu-JenniferCooper.gif) 0px -88px no-repeat;
}
#menu li#menuContact {
	width: 113px;
	height: 88px;
	background: url(../images/menu-contact.gif) 0px 0px no-repeat;
}
#menu li#menuContact a {
	display: block;
	width: 113px;
	height: 88px;
	text-indent: -9999em;
	text-decoration: none;
}
#menu li#menuContact a:hover {
	background: url(../images/menu-contact.gif) 0px -88px no-repeat;
}

And the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta name="Keywords" content="" />
		<meta name="Description" content="" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="phone" content="651-895-5028" />
		<meta name="address" content="16520 N Hillcrest Ct." />
		<meta name="city" content="Eden Prairie" />
		<meta name="state" content="Minnesota" />
		<meta name="country" content="United States" />
		<meta name="zipcode" content="55346" />
<meta name="verify-v1" content="ztLQ/DunJDh6/l4nqlxn5rGDXSIagJyhFLOzJqlfgyI=" />
<title>jlc consultant</title>
<link rel="SHORTCUT ICON" href="../images/logo_32.ico" />
<link rel="stylesheet" href="http://jlcconsultant.com/paulcooper201/style3.css" type="text/css" media="screen" />
	
	</head>
	<body>
		<h1 id="logo">
			<a href="">jlc consultant</a>
	</h1>

    		<div id="inside">
        <p><p class="ctrtxt">Jennifer Liu-Cooper is a development operations consultant with over twenty years of experience in the field.  Areas of specialty include business process re-design, knowledge/data management, gift/pledge processing, and system selection and implementation. Institutions served span the private and public sectors, including colleges and universities, hospitals, and non-profit organizations. 

			<div id="signature">
				<p>Sincerely,</p>
				<p>Jennifer Liu-Cooper</p>
		
	
		
	<div id="menu">
			<ul>
				<li id="menuIntroduction"><a href="index.html">Introduction</a></li>
				<li id="menuConsulting"><a href="consulting-services.htm">Consulting Services</a></li>
				<li id="menuJennifer"><a href="Jennifer-Cooper.htm">Jennifer Cooper</a></li>
				<li id="menuBlog"><a href="//jlcconsultant.com/blog">Blog</a></li>
				<li id="menuContact"><a href="contact.htm">Contact</a></li>
			</ul>
			
	</div>		
			
	</div>
	</body>
</html>

Any help would be greatly appreciated!

[X96 Web Design]

It's because you have float: left; in there. It makes it float left.

If you take the float:left out, it'll work - BUT, there'll be a space between <LI>'s.

Cheers,
X96

[davelf]

you should work with the padding-left or left
like this one, for example:

.menu li  {
	left:auto;
	top:auto;
	left:10px;
	position: absolute;
	display: none;
}

good luck

[paulc201]

Thanks so much! I'll try these out and post my results later today.