Spacing menu items evenly across menu
 

Hi. I have been through all the forums under menu bars and nothing seems to have helped. Like so many others I would like my menus spaced evenly across. I used the cheat sheet provide by juggledad.

I have successfully changed the background to a gradient image. Everything works like I would like it to except for the spacing. Any help would be greatly appreciated.

The site is johnmcconnellphd.com

The css I added from the cheat sheet is:

/* =========================== */
/* Page menu background */
/* =========================== */
div#menu1 {
line-height: 30px;
background: #fff url("http://www.johnmcconnellphd.com/wp-content/themes/atahualpa/images/nav.png") repeat-x center top;
margin: 0 auto;
width: 100%;
float: left;
list-style: none;
position: relative;
}
/* ============================== */
/* Page Menu item's background and border */
/* ============================== */
div#menu1 ul.rMenu {
//background: red;
border: none 0px;
background-image: url(http://www.johnmcconnellphd.com/wp-c...ages/nav.png);
//height: 30px;
text-align: left;
margin: 0 auto;
display: block;
}

/* ========================= */
/* Page Menu item */
/* ========================= */
ul.rMenu li a:link,
ul.rMenu li a:visited,
ul.rMenu li a:hover,
ul.rMenu li a:active,
ul.rMenu li {
color: #FFFFFF !important;
background-image: url(http://www.johnmcconnellphd.com/wp-c...ages/nav.png);
}

I just used Firebug to come up with this code that will make the top level full width at least in Firefox. You will have to add more CSS to adjust the sub-menus because of the cascading part of CSS.