how to center my menu bar

http://blackrebelkinky.com/
this is what I have in my CSS. i’ve managed to put space between each categories.
now I want to center the whole bar because as you can see there is too much space on the right…

Top menu area
========================================================================== */
.topmenuarea {
margin: 20px 0 20px 0;
}
#topmenu {
background: url(images/menu-bg.jpg) repeat-x;
padding: 5px 0 0 0;
height: 65px;
}
#topmenu ul {}
#topmenu ul li {
float: left;
position: relative;
font-family: ‘Lato’,sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0 50px 0 0;
color: #333;
}
#topmenu ul ul {
display: none;
float: left;
position: absolute;
top: 2em;
left: -5px;
z-index: 99999;
padding: 5px 0 0 5px;
margin: 14px 0 0 0;
background: #fff;
border: 1px dashed #c1c1c1;
border-top: none;
}
#topmenu ul ul ul {
left: 100%;
top: -20px;
border: 1px dashed #c1c1c1;
}
#topmenu ul ul li,
#topmenu ul ul ul li {
min-width: 130px;
margin: 0;
padding: 0;
border: none;
background: #fff;
}
#topmenu u ul a {
line-height: 1.5em;
padding: .5em .5em .5em 1em;
width: 10em;
height: auto;
}
#topmenu ul li a {
text-decoration: none;
color: #333;
display: block;
line-height: 3.1em;
}
#topmenu ul li:hover > ul {
display: block;
}
#topmenu ul ul a:hover {
color: #8fc73e;
}
#topmenu ul li:hover > a,
#topmenu ul ul :hover > a {
color: #8fc73e;
}
#topmenu ul li.current_page_item a {
color: #783196;
}
#topmenu select {
display: none;
}