OK, an HTML coding question

I need to tweak the widths of the padding/margins on this webpage, so the sidebar doesn't kick to the bottom. I don't know enough about the various pieces of this page to be able to fix it myself. I keep trying, but unsuccessfully.

The basic issue is that the width of the main body of text is 400 pixels but it usually runs around 425, and the sidebar is 220 pixels, and the total width of column + sidebar is supposed to be no more than 692 pixels.

What I want to do is instruct the page to make the margins on either side (the big green bars on either side of the white stuff) smaller, so that the column and sidebar runs next to each other.

Anyone who can shed light on this?

Below is the all relevant code (I think).

Thanks.

#wrapper {

margin: 0 auto;

padding: 0;

border: 0;

width: 692px;

text-align: left;

background: #fff url(http://www.blogblog.com/moto_son/innerwrap.gif) top right repeat-y;

font-size:90%;

}

/* Header */

#blog-header {

color: #ffe;

background: #8b2 url(http://www.blogblog.com/moto_son/headbotborder.gif) bottom left repeat-x;

margin: 0 auto;

padding: 0 0 15px 0;

border: 0;

}

#blog-header h1 {

font-size: 24px;

text-align: left;

padding: 15px 20px 0 20px;

margin: 0;

background-image: url(http://www.blogblog.com/moto_son/topper.gif);

background-repeat: repeat-x;

background-position: top left;

}

#blog-header p {

font-size: 110%;

text-align: left;

padding: 3px 20px 10px 20px;

margin: 0;

line-height:140%;

}

/* Inner layout */

#content {

padding: 0 10px;

}

#main {

width: 400px;

float: left;

}

#sidebar {

width: 220px;

float: right;

}

/* Bottom layout */

#footer {

clear: left;

margin: 0;

padding: 0 20px;

border: 0;

text-align: left;

border-top: 1px solid #f9f9f9;

background-color: #fdfdfd;

}

#footer p {

text-align: left;

margin: 0;

padding: 10px 0;

font-size: x-small;

background-color: transparent;

color: #999;

}