header: centering menu bar problem

hi,

i have a problem if i center my menu bar in the header on my site. after centering there is a small, but visible border below the menu buttons. to make it clearer: check this pic
to visualize it better i used the gradient menu bar in this pic
what i mean is the small grey line below the menu items.
how do i remove this line/border??
it appears only if i center the menu bar, if menu bar is right or left no line appears!

for centering the menu i used

#access {font-size:135%; text-align:center; font-variant:small-caps;}
 #access ul{display:inline-block;}

any ideas of how to solve this problem??

i use weaver 2.2.2. with the default twenty ten theme