can’t center nav bar buttons

hey all,
i can’t for the life of me figure out how to center the buttons on my nav bar…nor have i been able to find the proper solution on these boards (i’m sure it exists, but i’m running out of patience).
i can get them to float left or right, of course, but they won’t center. what am i missing?
THANK YOU in advance.
Jim

the site:
https://johnsonelitesports.com/

here’s my nav code (i’ve tried throwing in “text-align:center;” tags in multiple locations but have removed them. this is the original code):

#navigation {
clear: left;
background: url(images/nav.png) repeat;
width: 100%;
float: left;
text-align:center;
z-index: 100;
position: relative;
margin-top: 20px;
}

#navigation ul * {
margin:0;
padding:0
}

#navigation ul {
padding: 0;
margin: 0;
text-align: center;
}

#navigation ul li {
position:relative;
font-family: Copperplate, Verdana, Arial, Helvetica, sans-serif;
list-style-type: none;
font-size: 12px;
line-height: 24px;
float: left;
text-align: center;
padding: 0;
margin: 0;
position: relative;
}

#navigation ul a {
display: block;
font-weight: bold;
color: #fff;
border-right: 1px solid #fff;
padding: 0 15px;
}

#navigation ul a:hover {
color: #444;
background: #c5c5c5;
text-decoration: none;
}
#navigation ul li:hover ul { display: block; z-index: 1000;}
#navigation ul li:hover ul ul { display: none; }
#navigation ul ul { position:absolute; top:24px; left:0; background:#d1d1d1; display:none; list-style:none;}
#navigation ul ul li {position:relative; border:1px solid #aaa; width:159px; margin:0; }
#navigation ul ul li a {display:block; padding:0 7px 0 12px; color: #555; background-color:#d1d1d1; border-right: 0; font-size: 12px; }
#navigation ul ul li a:hover {background-color:#c5c5c5}
#navigation ul ul li:hover ul { display: block; }
#navigation ul ul ul { left:159px; top:-1px; display: none; }