I am having some issues with centering my webpage with css. I have set the margins as auto and the width as 760px, and my page is somewhat centered. However the contents still little bit right of the page. I'm including the code below. Any help will be greatly appreciated.


body {
background-image:url(../images/slice.gif);
background-repeat:repeat-x;
}
#wrap {
margin-left:auto;
margin-right:auto;
width:760px;
}

#header img {
float:left;
margin:-10px 0px 0px 0px;
}
#header ul {
float:left;
list-style:none;
}
#header li {
float:left;
display:inline;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:24px;
padding:0px 32px 0px 0px;
}
#header p{
float:right;
color:#FFF;
font-size:24px;
text-decoration:underline;
font-family:Arial, Helvetica, sans-serif;
margin: 16px 0px 0px 0px;
}

#header li a {
text-decoration:none;
}
#header li a:visited {
float:left;
display:inline;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:24px;
padding:0px 30px 0px 0px;
}
#header li a:hover {
text-decoration:underline;
color:#FFF;
}
#header p a:hover {
color:#0099CC;
}
#header #social {
float:right;
margin: -100px 0px 0px 0px;
}
#header p a:visited {
float:right;
color:#FFF;
font-size:24px;
text-decoration:underline;
font-family:Arial, Helvetica, sans-serif;
margin: 16px 0px 0px 0px;
}