How to center the items in my menu while having 100% width background

I am working on a website: http://homegym.sg/index.php/

Have used jquery to create an effect such that when the user scroll down, a black menu will appear at the top of the screen. However i have been trying alot of ways but it is not able to show as what i wanted.

I wanted to have the background of the menu fill 100% width of the screen. The middle part of my screen is fixed width (960px) but when the user screen is more than 960px the background will expand to fill the side.

For my we开发者_如何学JAVAbsite background it is doing that, but for the menu background, the only closest effect i get is having the background fill the entire width of the screen, but with the contents align to the left (what i wanted is center alignment).

My div for the menu is #menu, css are found is menu.css

Here some part of the code:

  #menu {

    width: 100%;
    z-index:888; 
    display:none; 
    position:fixed; 
    top:0 ;
    left: 0;
}

ul.topnav {
    width: 100%;
    list-style: none;
    padding: 0 50px;
    float: left;
    text-align: left;
    background: #222;
    font-size: 1.2em;
    background: url(../images/css_menu/topnav_bg.gif) repeat-x;

}

The width of the div#menu should be 100% and this div gets the background.
To center the ul.topnav it needs the real width (of all lis) and margin auto.

Change your css defintions to:

#menu {
    background: url("../images/css_menu/topnav_bg.gif") repeat-x scroll 0 0 transparent;
    display: none;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 888;
}

ul.topnav {
    font-size: 1.2em;
    height: 35px;
    margin: 0 auto;
    width: 802px;
}

I can't test on your page directly because you have JavaScript parse errors, and I don't feel like copying your code to JSFiddle at this point in time but I can give a suggestion. Try setting the horizontal margin of your menu to auto:

div#menu {
    margin:0 auto;
}

or, more pedantically:

div#menu {
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

I have checked it out, and the problem is the float element and margins. Try with this css properties (I've changed them to absolute paths for my local testing):

#menu {
    display: none;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 888;
    background: url(http://homegym.sg/skin/frontend/default/electronics01-black/images/css_menu/topnav_bg.gif) repeat-x;
}

ul.topnav {
    width: 820px;
    list-style: none;
    padding: 0 50px;
    float: none;
    text-align: left;
    background: #222;
    font-size: 1.2em;   
    margin: 0 auto;
}
ul.topnav li {
    float: none;
    margin: 0 auto;
    padding: 0 15px 0 0;
    position: relative; /*--Declare X and Y axis base for sub navigation--*/
    background: url(http://homegym.sg/skin/frontend/default/electronics01-black/images/css_menu/main-delimiter.png) 95% 4px no-repeat;
}

By the way, nice website!