#top-nav {
width:100%;
}
#top-nav-link {
text-transform:uppercase;
font:bold 12px/18px Tahoma, Arial, Helvetica, sans-serif;
padding:0;
margin:auto;
display:table;
width: 100%;
}
#top-nav-link li {
display:table-cell;
background:#f4f4ec;
border-bottom:5px solid #8eb132;
}
#top-nav-link li a {
display:table-cell;
color:#44494f;
padding:10px 15px 10px 15px;
}
#top-nav-link-sep {
border-left:1px solid #e1e1d3;
}
#top-nav-link li a:hover {
color:#75902d;
background:#C42B2D;
}
<ul id="top-nav-link">
<li><a href="doc/news" onclick="Load('news'); return false;">Новости</a></li>
<li><a id="top-nav-link-sep" href="doc/library" onclick="Load('library'); return false;">Библиотека</a></li>
<li><a id="top-nav-link-sep" href="doc/contacts" onclick="Load('contacts'); return false;">Контакты</a></li>
<li><a id="top-nav-link-sep" href="doc/" onclick="return false;">Отдых</a></li>
<li><a id="top-nav-link-sep" href="doc/history" onclick="Load('history'); return false;">История</a></li>
<li><a id="top-nav-link-sep" href="doc/cllagr" onclick="Load('cllagr'); return false;">Коллективный договор</a></li>
<li><a id="top-nav-link-sep" href="doc/safety" onclick="Load('safety'); return false;">Безопасность труда</a></li>
<li><a id="top-nav-link-sep" href="doc/photos" onclick="Load('photos'); return false;">Фотогалерея</a></li>
</ul>
</div>
В меню есть отступы, текст не ровно по центру это видно при наведение курсора и так видно. Тыкал тыкал, так и не понял как их убрать. Мне нужно растянуть меню по ширине.
Средний
Safari
Chrome 
