Как разместить неупорядоченные списки (навигационное меню) внутри ширины: 100% деления?

Question

РЕДАКТИРОВАТЬ: Исправлено, неконвенционально (я думаю), все, что я сделал, было оставлено на полях: авто; margin-right: auto, навигационное меню, и оно имело фиксированную ширину по моему вкусу (1002px, в моем случае), и сделало позиционирование относительным, и создал еще один div, у которого был "фиктивный" фон, и сделал его абсолютным. Спасибо парням, которые предложили решения, хотя, ценю это.

Интересно, может ли кто-нибудь помочь мне с этой проблемой. В настоящее время проектируется веб-сайт, на котором раздел меню навигации не имеет фиксированной ширины (ширина: 100%), а внутри этого раздела меню навигации находятся неупорядоченные списки "Главная | О компании | Услуги | Галерея | Контакт". Таким образом, проблема заключается в том, что при предварительном просмотре моего веб-сайта в браузере отображается "Главная | О программе и т. Д." плавает влево, и когда я прокручиваю, уменьшая страницу, она продолжает плавать влево. Таким образом, мой вопрос, без необходимости фиксировать ширину div, мог бы кто-нибудь узнать, как расположить эти неупорядоченные списки так, чтобы он был вровень или соответствовал остальной части моей страницы / содержания.

Вот CSS для меню навигации:

@charset "utf-8";
#navigation {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 40px;
    background-image: url(../pictures/nav_bg.jpg);
}
#navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#navigation li {
    float: left;
}
#navigation ul li a {
    text-decoration: none;
    float: left;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #000;
    text-align: center;
    display: block;
    width: 88px;
    height: 30px;
    background-image: url(../pictures/nav_button.jpg);
    padding-top: 10px;
}
#navigation ul li a:hover {
    background-image:url(../pictures/nav_button_hover.jpg)
}

Answer 1

Вот ссылка на jsfiddle

Используйте следующий код:

HTML

<ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

ul.nav {
    width:100%;
    margin:0 auto;
    padding:0;
    list-style:none;
    background-color:#62564A;
    text-align:center;
    font-family: sans-serif; 
}
.nav li { 
    display:inline-block;
    width:19%;
    margin:0;
    padding:0;
}
.nav a {
    text-align:center;
    padding:12px 0 13px 0;
    margin:0;
    border-right: 1px solid #fff;
    display:block;
}
.nav a:hover { 
    background:#A26A42;
    border:none;
}

ul.nav li:first-child a{
 border-right: 1px solid #fff;
}
ul.nav li:last-child a {
border:none;
}