Hey

I am helping my girlfriend make a blog and doing some basic HTML and CSS to customise it. However, I cannot seem to center the banner. It's off to the right.

The blog is at BenAndIdaBlog

If someone could PLEASE edit this style sheet to fix the banner so it's centered that would help me out a lot!

Thanks!!

Once you're done with editing the code, just reply with the new code.

Here's the code:

Code:
body {
  font: 12px/16px Verdana, Arial, Sans-serif;
  background: url('bg.jpg');
}

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

h1,h3,h4,h5,h6, div.navheader, div.default {
  font-family: Verdana, Arial, Sans-Serif;
  color: #222;
}

div#side h3 div.navheader {
  color: #666;
}

div#wrapper {
  margin: 20px auto 20px auto;
  width: 800px;
  padding: 10px;
  background-color: #FFF;
}

div#header {
float: left;
clear: left;
display: inline;
width: 1000px;
height: 400px;
margin-top: 20px;
background-image: url(http://benandida.blogg.se/images/2010/banner_109823489.jpg)

}

div#content {
  float: left;
  padding: 0 20px 20px 20px;
  width: 550px;
}

div#side {
  width: 180px;
  padding: 0;
  float: right;
}

div#side div.navheader, div#side h4, div.default {
  padding: 20px 0 5px 0;
  font-size: 18px;
  font-weight: normal;
}

div#foot {
  background-color: #CCC;
  height: 40px;
  padding: 20px;
}

/* hide calender - doesn't work anyway */
div#side div#calendar {
  display: none;
}

div#header h1 {
  font-size: 45px;
  font-weight: normal;
}

div#header h1 a {
  text-decoration: none;
  color: #FFF;
}

div#header h2 {
  font-size: 12px;
  margin-top: 15px;
  color: #FFF;
}

div#content h3 {
  font-size: 24px;
  font-weight: normal;
  margin: 20px 0 20px 0;
}

div#content div.entrybody {
  margin: 10px 0 20px 0;
}

div#content div.entrybody ul {
  margin: 10px 0 10px 15px;
}

div#content div.entrybody li {
  font-size: 12px;
  color: #222;
  list-style-type: square;
}

div.default {
  margin: 0 0 15px 0;
}

div.nav input {
  margin-right: 5px;
}

div.nav ul {
  margin: 5px 0 5px 5px;
  padding: 0;
}
div.nav li {
  list-style: none;
  padding: 2px 0;
}

div.nav ul li strong {
  line-height: 37px;
  font-size: 11px;
}

div.entrymeta {
  font-size: 11px;
  margin: 0 0 20px 0;
  padding: 10px 0 10px 0;
  color: #666;
  line-height: 7px;
}

div.commentheader, p.commenttext {
  margin: 0 0 0 15px;
  font-weight: bold;
  color: #222;
}

p.commenttext {
  font-weight: normal;
}

div.commentmeta {
  color: #666;
  margin: 5px 0 20px 15px;
  font-size: 11px;
}

form.commentform {
  font-size: 11px;
}

form.commentform input, form.commentform textarea {
 margin: 0 5px 10px 0;
 vertical-align: middle;
}

input.formbutton {
 margin-top: 10px;
}

.separator {
  display:none;
}

.subside {}

.image {
  border: 0;
  margin: 0 6px 6px 0;
}

.thumbnail {
  margin: 0 6px 6px 0;
}

.video {
  padding: 0;
}

.xmlButton {
  border: 1px solid;
  border-color: #FC9 #630 #330 #F96;
  padding: 0 3px;
  font: bold 10px Verdana, Arial, Helvetica, Sans-serif;
  color: #FFF;
  background: #F60;
  text-decoration: none;
  margin:0;
}

.clear {
  clear: both;
}