Hey Guys. Bit of a head-scratcher here.

I am trying to add an underline to the 'current' page item in the nav menu here: http://iamshawnrice.com/demo/jlross/?page_id=102#.UKKkU-Q8CSo

My Code:

#top-menu ul.nav li {
padding: 0;
float: left;
width: 20%;
font-family: 'LeagueGothicRegular', 'Goudy Bookletter 1911', arial, sans-serif;
text-transform: uppercase;
text-align: center;
}
#top-menu ul.nav li a {
font-size: 24px;
color: #555;
text-decoration: none;
text-shadow: 0 1px 1px rgba(176, 176, 176, .5);
-webkit-transition: all .5s ease-in-out;
padding-bottom: 0px;
width: 100%;
}
#top-menu > ul > li.current-menu-item > a {
font-family: inherit;
color: #333 !important;
font-style: normal !important;
border-bottom: 2px solid #333;
} 

I need the #top-menu ul.nav li a item to not be 100% width, but to be centered in it's parent container.

Any thoughts?