центр навигации сверху div

Question

Я пытаюсь центрировать навигационные вкладки сверху div. в основном, я хочу, чтобы навигация была сосредоточена сверху div с шагом 2px между каждой вкладкой. Навигационные вкладки теперь, похоже, не сидят в центре.

любая помощь была бы ПРИГОВОРЕНА!

.row { 
    margin: 0 auto; 
    width: 960px; 
} 

#top-menu{ 
    font-family: "LeagueGothicRegular",sans-serif; 
    text-align: center; 
    margin-top:240px; 
    } 

#top-menu li{ 
    display: block; 
    float: left; 
    line-height: 1; 
    margin: 0 17px; 
    text-align: center; 
    } 

#top-menu a{ 
    font-family: 'LeagueGothicRegular', sans-serif; 
    background-color: #fff; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    color: #000000; 
    display: inline-block; 
    font-size: 1.97em; 
    line-height: 1; 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 
    padding: 6px 18px; 
    text-decoration: none 
} 

#top-menu a:hover, 
#top-menu .active a{ 
    color: #fff; 
    background: #E80B44; 
    } 
#top-menu a:hover .nav-arrow{ 
    border-top-color: {{settings.nav_hover_colour}}; 
    } 

#top-menu ul .first ul{ 
    left: 0; 
    } 

#top-menu ul ul li{ 
     color: #000000; 
    display: inline-block; 
    font-family: 'LeagueGothicRegular', sans-serif; 
    text-shadow: 1px 1px 1px transparent; 
    } 

#top-menu ul ul { 
    font-family: 'LeagueGothicRegular', sans-serif; 
    display: inline-block; 
    border: none; 
    text-shadow: 1px 1px 1px transparent; 
    } 

#top-menu > ul > li { 
     font-family: 'LeagueGothicRegular', sans-serif; 
    } 

Answer 1

1. Изменение display: block; из #top-menu li в display: inline-block; и удалить float: left;
2. Добавить text-align:center; в #top-menu ul

Когда это будет сделано, ваша навигация будет центрирован при уменьшении полей.