CSS 3 columns faux method - right side bar has bigger width?

Thanks in advance to anyone who can help...

I have a 3 column CSS layout. I'm using the faux columns method (with background image tiling down my page) to get my left and right side bars to look like they touch my footer.

Everything went well except my brown right side bar seems to have a bigger width than my left brown side bar. On the one background image that is tiled down my page, I scaled it as best as I could so the right and left sidebars are the same width. I'm not sure why they are not showing up as the same width. I think it has something to do with my padding or margins. (Which I am horrible at!)

My main page can be found here: http://www.littlelizzard.com/index2.html
See how my right side bar is a lot wider than my left? I want that right side bar to be the same width as my left... and I want to keep my content width so it fits between the two.
And this is my CSS code: (Please excuse the mess. This page is a work in progress)
Any help is greatly appreciated.


* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#whole {
margin: 0 auto;
width: 1020px;
}
#columns {
background: url(http://www.littlelizzard.com/makeawebsite.gif);
margin-bottom: 0px;
overflow: auto;
width: 100%
}
#header {
color: #333;
width: 1000px;
padding: 10px;
height: 180px;
margin: 10px 0px 0px 0px;
background-image: url(littlelizzard.com/weblogo.jpg);
border-bottom: 2px solid #000000;
}
#header a {

color: #ffffff;
text-decoration: underline;
font-weight: bold;
font-family: Arial;
font-size: 14 px;

}

div#navbar2 {

border-top: solid #000 1px;
border-bottom: solid #000 1px;
padding: 10px;
margin: 0px 0px 0px 0px;
background-color: #666633;
height: 10px;


}


div#navbar2 ul {

margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
line-height: 10px;
white-space: nowrap;


}


div#navbar2 li {

list-style-type: none;
display: inline;


}


div#navbar2 li a {


text-decoration: none;
padding: 7px 10px;
color: #000000;


}


div#navbar2 li a:link {
color: #000000;

}


div#navbar2 li a:visited {
color: #000000;


}


div#navbar2 li a:hover {
font-weight: bold;
color: #000000;
text-decoration: underline;

}
#leftnav {
display: inline;
color: #333;
margin: 10px;
padding: 0px;
width: 195px;
float: left;
background-color: #968e61;
text-decoration: underline;
}
#leftnav ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: center;
}

#leftnav a
{
display: block;
width: 178px;
padding-top: 7px;
padding-right: 3px;
padding-bottom: 7px;
padding-left: 3px;
border-bottom-width: 1px;
}

#leftnav a:link, .navlist a:visited
{
color: #000000;
text-decoration: none;
font-weight: bold;
}

#leftnav a:visited
{
color: #000000;
text-decoration: underline;
font-weight: bold;
}

#leftnav a:hover
{
text-decoration: none;
color: #000000;
background-color: #666633;
}

#content {
float: left;
color: #333;
margin: 10px 13px;
padding: 0px;
width: 565px;
display: inline;
position: relative;
}
#rightcolumn {
display: inline;
background-color: #968e61;
margin: 10px 10px 10px 0px;
padding: 0px;
width: 195px;
float: right;

}
#footer {
width: 1000px;
clear: both;
color: #333;
background: #ABBEBE;
background-color: #CCCCCC;
margin: 0px 0px 10px 0px;
padding: 10px;
}
p {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 12px;
line-height: 11pt;
margin-top: 3px;
margin-right: 0;
margin-bottom: 3px;
margin-left: 0;
padding-bottom: 9px;
}

a {
color: #0000FF;
font-weight: bold;
text-decoration: underline;
}
a:visited {
color: #0000FF;
text-decoration: underline;
font-weight : bold;
}
a:hover {
color: #666633;
text-decoration: inherit;
}


h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: bold;
color: #333333;
line-height: 24px;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
color: #333333;
line-height: 20px;
}
#divback {
width: 580px;
background-color: #CCCC99;

}
.clear { clear: both; background: none; }

Hello WebLizzard,
You'll need a new background image... or narrow up your layout to match the image your using.
Your existing image is 922px wide.
Your site is 1020px wide with the background image repeated on both X and Y axis (that's what's making the right column wider).

Make your CSS look like this to show what's really happening -
#columns {
background: url(http://www.littlelizzard.com/makeawebsite.gif) no-repeat;
margin-bottom: 0px;
overflow: auto;
width: 100%
}

Also try this - #columns {
background: url(http://www.littlelizzard.com/makeawebsite.gif) repeat-y;
margin-bottom: 0px;
overflow: auto;
width: 100%
}

Thanks so much Excavator! I really appreciate your help.

I should've realized this since I started out with the 922px and then made it a bit wider a few days later. I kind of feel dumb that I didn't think of that. And I wasn't sure if it was a margin/padding issue either. I'm still learning CSS, so I am kind of slow when it comes to recognizing my mistakes.

Thanks again!!! :o