Image won't center

Hi all!

For some reason, I cannot get the image of the chair backs, about half-way down the page to center.

I'd like it to show up just above the H2 that says "Our Experience".

Here's the CSS:

/* CSS layout */
BODY {
      font: .8em/140% verdana, arial, sans-serif;
      text-align: center;
      padding: 0px;
      background: #f8f8f8;
      color: #000;
      margin: 0px auto;
      border-top: 3px solid #cc0000;}
img {      border-style: none;
      border-color: inherit;
      border-width: 0px;
      float: left;
}
.clear {
      clear: both;}

h1 {
      font: normal 220% tahoma;
      color: #cc0000;}

h2 {
      font: normal 160% tahoma;
      color: #888888;}

#wrapper {
      width: 850px;
      background: #fff url('images/bgimage.jpg') no-repeat top right;
      text-align: center;
      border: 1px solid #888888;
      min-height: 800px;
      margin-top: 10px;
}

.content table {
      
}

#masthead {
      width: 100%;
      margin: 10px 0 0 20px;
      float: left;
}
#top_nav {
      font-size: 80%;
      height: 30px;
      text-align: left;
      text-transform: uppercase;
}
      #top_nav a{
      padding: 0 8px 0 0;
      color: #888;
}
      #top_nav a:hover{
      padding: 0 8px 0 0;
      color: #cc0000;
}

#page_content {
      width: 100%;
      height: 100%;
}
      .content {
            width: 90%;
            float: left;
            padding: 10px 0 0 20px;
            text-align: left;
}
#footer {
      height: 30px;
      text-align: center;
      padding: 0 10px 0 0;
      margin: 10px 0 0 0;
      
}
.m_banner_hide{
      display:none;
}
.m_banner_show{
      display:block;
}
.imageright {float: right; margin: 3px; padding: 5px;}
.imageleft {float: left; margin: 3px; padding: 5px;}
.imagecenter {text-align: center !important; margin: 3px; padding: 5px;}


Any ideas?

Thanks!