Can't Center Div in Chrome or Safari

I am very new to this and I am having issues centering a div in Chrome and Safari (works just fine in IE and Firefox)

I am using a joomla template and have tried spent days trying resolve the issue. I have used a few different methods including :

margin-left: auto ;
margin-right: auto ;

but nothing seems to work (again I know very little about what i am doing).

Can someone help? Here is the url:

staging.unnucreations.com (http://staging.unnucreations.com)

The validator is finding a couple of extra closing divs (http://validator.w3.org/check?uri=http://staging.unnucreations.com/). I'd sort these first - it's possible they're causing the issue.

It isn't those divs, although they need sorting.

Try making your css for #menu:

#menu {
background-color:#FAFAFA;
border-bottom:1px solid #EDEDED;
overflow:auto;
/*height:30px;*/
margin:0 auto 0;
text-align:left;
width:920px;
}

This will sort out the floats in your menu which are causing Safari/Chrome to offset the #addwrap div.

Thanks SB65, that seems to work, but now the menu is not functioning properly. Any advice?

Ha, didn't spot you had a drop down menu there....

Have a try with the following in your css instead of the current #menu:


#menu {
background-color:#FAFAFA;
border-bottom:1px solid #EDEDED;
margin:0 auto 0;
text-align:center;
width:920px;
}

#menu:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}


That should clear the floats without messing up the dropdown.