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);
}