I've installed the Category Tabs Roll Over Menu from JollyJim on my webshop, but I can't get the tabs centered.

I've placed the code from stylesheet.categorytabs.css in stylesheet.css as directed and deleted the old code.

When I try to alter the code (replaced 'left' with 'center'), the whole thing looks wrong.

How can I get the tabs in the center?

Code:
/*#navCatTabsWrapper*/
#navCatTabsWrapper {
    margin: 0;
    background-color: #E5EDF5;
    font-weight: bold;
    color: #ffffff;
    height: 1%;
    width: 100%;
    } 
#navCatTabs {
      float: left;
      width:100%;
      background:#284683 url("") repeat-x bottom;
      font-size:150%;
      line-height:normal;
      }
    #navCatTabs ul {
      width:100%;
      margin:0;
      padding: 0px 10px 0px 5px;
      list-style:none;
      }
    #navCatTabs li {
      float: left;
      background:url("../images/left_both.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      border-bottom:1px solid #765;
      }
    #navCatTabs a {
      float: left;
      display:block;
      background:url("../images/right_both.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      text-decoration:none;
      font-weight:bold;
      color:#ffffff;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #navCatTabs a {float:none;}
    /* End IE5-Mac hack */
    #navCatTabs a:hover {
      color:#333;
      }
    #navCatTabs #current {
      background-position:0 -150px;
      border-width:0;
      }
    #navCatTabs #current a {
      background-position:100% -150px;
      padding-bottom:5px;
      color:#ccccccc;
      }
    #navCatTabs li:hover, #navCatTabs li:hover a {
      background-position:0% -150px;
      color:#333;
      }
    #navCatTabs li:hover a {
      background-position:100% -150px;
      }