left margin too wide in auto center

[pillsbury]

can't figure this one out...i applied the auto centering techniques to my html, and it centers. however, the left margin that's set to auto is way too wide. any way to modify this?

/*
CSS for Will Portfolio site
*/

html {
margin:-10px;
padding: 0px;
height: 1000px;
width: 700px;
margin-left: auto;
margin-right: auto;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin-left: auto;
margin-right: auto;
text-align: center;
}
a {
  font-weight: light;
  color: black;
  text-decoration: none;
}

a:link {
  text-decoration: none;
}

a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #ec008c;
}

a: active {
  text-decoration: none;
  color: #ec008c;
}

li {
list-style-type: none;
}
#bodycontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 25px;
font-weight:normal;
width: 1000px;
clear: left;
padding-top: 34px;
text-align:left;
}
div#navigation {
height: 30px;
width: 400px;
margin: 0 0 0 105;
padding: 75px 0 0 20px;
float: right;
}
div#navigation li{
display: inline;
float: right;
margin: 0 5px 0 25px;
width: 75px
text-align; left;
}
div#header img{
float:left;
width: 250px;
display: block;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight:bold;
padding: 18px;
}
div#links {
width: 150px;
float: left;
}

div#links li{
margin: 0 0 0 -23px;
}
a img {
border-style: none;
display: block;
}
div#contactheader {
float:left;
}
div#contact {
padding: 30px 0 0 210px;
}
div#contact li {
display:inline;
float:left;
padding: 0 3px 0 0;
text-align: left;
}
.blackfont {
font-size: 18px;
font-weight:bold;
margin: -20px 0px 0 -30px;
}
.pinkfont {
font-size: 18px;
font-weight:bold;
color: #ec008c;
margin: -20px 300px 0 0;
}
.pinkfont2 {
font-size: 18px;
font-weight:bold;
color: #ec008c;
margin: -20px 0 0 0;
}
.pink {
color: #ec008c;
}
div#email {
margin: 30 50 50 509;
padding: -20 0 0 550;
}
#wrap {
width:850px;
margin:0 auto;
background:#999;
overflow:hidden;
}
#left {
float:left;
width:50%;
background:#999;
text-align:justify;
padding: 0 20px 0 0;
}
#right {
float:left;
width:50%;
background:#777;
text-align:justify;
vertical-align: top;
}
div#hs {
width:150px;
}
div#gallery {
width:500px;
margin: -275px 0 0 175px;
}

[Blake Tallos]

can't figure this one out...i applied the auto centering techniques to my html, and it centers. however, the left margin that's set to auto is way too wide. any way to modify this?

/*
CSS for Will Portfolio site
*/

html {
margin:-10px;
padding: 0px;
height: 1000px;
width: 700px;
margin-left: auto;
margin-right: auto;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin-left: auto;
margin-right: auto;
text-align: center;
}
a {
  font-weight: light;
  color: black;
  text-decoration: none;
}

a:link {
  text-decoration: none;
}

a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #ec008c;
}

a: active {
  text-decoration: none;
  color: #ec008c;
}

li {
list-style-type: none;
}
#bodycontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 25px;
font-weight:normal;
width: 1000px;
clear: left;
padding-top: 34px;
text-align:left;
}
div#navigation {
height: 30px;
width: 400px;
margin: 0 0 0 105;
padding: 75px 0 0 20px;
float: right;
}
div#navigation li{
display: inline;
float: right;
margin: 0 5px 0 25px;
width: 75px
text-align; left;
}
div#header img{
float:left;
width: 250px;
display: block;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight:bold;
padding: 18px;
}
div#links {
width: 150px;
float: left;
}

div#links li{
margin: 0 0 0 -23px;
}
a img {
border-style: none;
display: block;
}
div#contactheader {
float:left;
}
div#contact {
padding: 30px 0 0 210px;
}
div#contact li {
display:inline;
float:left;
padding: 0 3px 0 0;
text-align: left;
}
.blackfont {
font-size: 18px;
font-weight:bold;
margin: -20px 0px 0 -30px;
}
.pinkfont {
font-size: 18px;
font-weight:bold;
color: #ec008c;
margin: -20px 300px 0 0;
}
.pinkfont2 {
font-size: 18px;
font-weight:bold;
color: #ec008c;
margin: -20px 0 0 0;
}
.pink {
color: #ec008c;
}
div#email {
margin: 30 50 50 509;
padding: -20 0 0 550;
}
#wrap {
width:850px;
margin:0 auto;
background:#999;
overflow:hidden;
}
#left {
float:left;
width:50%;
background:#999;
text-align:justify;
padding: 0 20px 0 0;
}
#right {
float:left;
width:50%;
background:#777;
text-align:justify;
vertical-align: top;
}
div#hs {
width:150px;
}
div#gallery {
width:500px;
margin: -275px 0 0 175px;
}

[/HIGHLIGHT]

I beleive thats because your bodycontainer {} Is 1000px; wide and this causes a horizontal scrollbar. Change it to

width:100%;