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

Question

EDIT: Исправлено, неконкурентоспособно (я думаю), все, что я сделал, было margin-left: auto; margin-right: auto, навигационное меню и дал мне фиксированную ширину моей симпатии (1002px, в моем случае), и сделал относительного позиционирования, и создал еще один div, который имел «макет» фона и сделал его абсолютным. Благодаря ребятам, которые предлагали решения, оцените это.

Было интересно, может ли кто-нибудь помочь мне с этой проблемой. В настоящее время разрабатывается веб-сайт, где навигационное меню div не имеет фиксированной ширины (ширина: 100%), а внутри этого навигационного меню div находятся неупорядоченные списки «Главная страница | О сервисах | Галерея | Контакты». Поэтому проблема заключается в том, что когда я просматриваю свой веб-сайт в браузере, «Главная страница и т. Д.», плавает влево, и когда я прокручиваю страницу, делая страницу меньшей, она продолжает плавать влево. Поэтому мой вопрос, без необходимости фиксировать ширину 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 link

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

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; 
}