Плавающее по левому краю горизонтальное меню посередине

Question

У меня возникли трудности с отображением списка меню в центре его родительского контейнера. Вот адрес страницы: simplekitchenandbath.com / staging / И необходимые фрагменты кода:

    div#wrapper {
        width:1100px;
        margin:0 auto;
        padding:0 0 50px 0;
    }

       div#content-main {
            background-color:#000;
            width:1024px;
            margin:0 auto;
        }

            nav {
                background-color:#000;
                height:30px;
            }

                div#nav-container {
                width:720px;
                margin:0 auto;
            }

ul#nav                         { position:relative; }
ul#nav li                      { float: left; zoom: 1; list-style-type:none; margin:0; border-bottom:1px solid #FFF; }
ul#nav a:hover                 { color:#DDD; text-decoration:none; }
ul#nav a:active                { color:#DDD; }
ul#nav li a                    { display:block; padding:0 10px 0 0; color:#FFF; text-transform:uppercase; }
ul#nav li:last-child a          { padding-right:0; }
ul#nav li.hover, ul#nav li:hover  { position: relative; }

Answer 1

Уменьшите ширину и выровняйте ее по центру, поместите ее внутри контейнера элемента и установите для его поля значение 0 auto;попробуйте адаптивный веб-дизайн с мультимедийными запросами css3 и нацеливайтесь на два разных размера монитора ... потому что у сайта на 780px мониторе есть ползунок, чтобы перемещаться горизонтально .... так в основном:

<div class="container">
    ... some code ...
</div>

css:
.container {
    width: 960px;
    margin: 0 auto;
}

Спасибо за чтение ..Мне нравится слышать ответ на мой ответ.

Answer 2

Используйте display:inline-block для элемента #nav и text-align:center для #nav-container

Answer 3

div#nav-container {
  width:575px;
  margin:0 auto;
}

ширина слишком велика для # nav-container. установите его на 575 пикселей!