Question

I am having difficulty in getting a menu list to float in the center of it’s parent container. Here is the address of the page: simplekitchenandbath.com/staging/
And the necessary code snippets:

    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

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

the width is too big on #nav-container. set it to 575px !