How to align borders in my Home Page

I have 3 columns in my blog which I decided to switch the right column to the left and the left column to the right.

Here what I had before the changes:

/* ================================================================
HOMEPAGE
=================================================================== */

#homepage {
background: #ffffff url(images/home-bg.gif) repeat-y;
width: 988px;
margin: 9px auto 0px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

.homepage-column-1 {
width: 400px;
float: left;
margin: 0px 6px 0px 0px;
padding: 0px;
}

#content-gallery {
margin: 0px 0px 6px 0px;
}

#promo-1 {
background: #E9ECEE;
border: 1px solid #C0CCD3;
margin: 0px 0px 12px 0px;
padding: 0px 6px 0px 6px;
}

#promo-2 {
background: #E9ECEE;
border: 1px solid #C0CCD3;
margin: 0px 0px 12px 0px;
padding: 0px 6px 0px 6px;
}

#promo-3 {
background: #E9ECEE;
border: 1px solid #C0CCD3;
margin: 0px 0px 12px 0px;
padding: 0px 6px 0px 6px;
}

#promo-4 {
background: #E9ECEE;
border: 1px solid #C0CCD3;
margin: 0px 0px 12px 0px;
padding: 0px 6px 0px 6px;
}

#static-block-1 {
width: 400px;
margin: 0px auto 12px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

.static-block-1-left {
width: 128px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
}

.static-block-1-middle {
width: 128px;
float: left;
margin: 0px 8px 0px 8px;
padding: 0px;
}

.static-block-1-right {
width: 128px;
float: right;
margin: 0px 0px 0px 0px;
padding: 0px;
}

#static-block-1b {
width: 400px;
margin: 0px auto 12px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

.static-block-1b-left {
width: 196px;
float: left;
margin: 0px 4px 0px 0px;
padding: 0px;
}

.static-block-1b-right {
width: 196px;
float: right;
margin: 0px 0px 0px 4px;
padding: 0px;
}

#static-block-2 {
width: 400px;
margin: 0px auto 12px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

.static-block-2-left {
width: 128px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
}

.static-block-2-middle {
width: 128px;
float: left;
margin: 0px 8px 0px 8px;
padding: 0px;
}

.static-block-2-right {
width: 128px;
float: right;
margin: 0px 0px 0px 0px;
padding: 0px;
}

#static-block-2b {
width: 400px;
margin: 0px auto 12px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

.static-block-2b-left {
width: 196px;
float: left;
margin: 0px 4px 0px 0px;
padding: 0px;
}

.static-block-2b-right {
width: 196px;
float: right;
margin: 0px 0px 0px 4px;
padding: 0px;
}

#static-block-3 {
width: 400px;
margin: 0px auto 12px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

.static-block-3-left {
width: 128px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
}

.static-block-3-middle {
width: 128px;
float: left;
margin: 0px 8px 0px 8px;
padding: 0px;
}

.static-block-3-right {
width: 128px;
float: right;
margin: 0px 0px 0px 0px;
padding: 0px;
}

#static-block-3b {
width: 400px;
margin: 0px auto 12px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

.static-block-3b-left {
width: 196px;
float: left;
margin: 0px 4px 0px 0px;
padding: 0px;
}

.static-block-3b-right {
width: 196px;
float: right;
margin: 0px 0px 0px 4px;
padding: 0px;
}

.homepage-column-2 {
width: 264px;
float: left;
margin: 0px 6px 0px 6px;
padding: 0px;
}

.homepage-column-3 {
width: 300px;
float: right;
margin: 0px 0px 0px 6px;
padding: 0px;
}

#random-video {
background: #E9ECEE;
border: 1px solid #C0CCD3;
margin: 0px 0px 6px 0px;
padding: 12px;
}

#banner-300 {
background: #ffffff;
margin: 0px 0px 12px 0px;
padding: 0px;
}

#opinion-poll {
background: #ffffff;
margin: 0px 0px 6px 0px;
padding: 0px;
}

/* ================================================================

And here’s what I have now…

/* ================================================================
HOMEPAGE
=================================================================== */

#homepage {
background: #ffffff url(images/home-bg.gif) repeat-y;
width: 988px;
margin: 9px auto 0px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

.homepage-column-3 {
width: 300px;
float: right;
margin: 0px 6px 0px 0px;
padding: 0px;
}

#content-gallery {
margin: 0px 0px 6px 0px;
}

#promo-1 {
background: #E9ECEE;
border: 1px solid #C0CCD3;
margin: 0px 0px 12px 0px;
padding: 0px 6px 0px 6px;
}

#promo-2 {
background: #E9ECEE;
border: 1px solid #C0CCD3;
margin: 0px 0px 12px 0px;
padding: 0px 6px 0px 6px;
}

#promo-3 {
background: #E9ECEE;
border: 1px solid #C0CCD3;
margin: 0px 0px 12px 0px;
padding: 0px 6px 0px 6px;
}

#promo-4 {
background: #E9ECEE;
border: 1px solid #C0CCD3;
margin: 0px 0px 12px 0px;
padding: 0px 6px 0px 6px;
}

#static-block-1 {
width: 400px;
margin: 0px auto 12px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

.static-block-1-left {
width: 128px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
}

.static-block-1-middle {
width: 128px;
float: left;
margin: 0px 8px 0px 8px;
padding: 0px;
}

.static-block-1-right {
width: 128px;
float: right;
margin: 0px 0px 0px 0px;
padding: 0px;
}

#static-block-1b {
width: 400px;
margin: 0px auto 12px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

.static-block-1b-left {
width: 196px;
float: left;
margin: 0px 4px 0px 0px;
padding: 0px;
}

.static-block-1b-right {
width: 196px;
float: right;
margin: 0px 0px 0px 4px;
padding: 0px;
}

#static-block-2 {
width: 400px;
margin: 0px auto 12px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

.static-block-2-left {
width: 128px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
}

.static-block-2-middle {
width: 128px;
float: left;
margin: 0px 8px 0px 8px;
padding: 0px;
}

.static-block-2-right {
width: 128px;
float: right;
margin: 0px 0px 0px 0px;
padding: 0px;
}

#static-block-2b {
width: 400px;
margin: 0px auto 12px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

.static-block-2b-left {
width: 196px;
float: left;
margin: 0px 4px 0px 0px;
padding: 0px;
}

.static-block-2b-right {
width: 196px;
float: right;
margin: 0px 0px 0px 4px;
padding: 0px;
}

#static-block-3 {
width: 400px;
margin: 0px auto 12px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

.static-block-3-left {
width: 128px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
}

.static-block-3-middle {
width: 128px;
float: left;
margin: 0px 8px 0px 8px;
padding: 0px;
}

.static-block-3-right {
width: 128px;
float: right;
margin: 0px 0px 0px 0px;
padding: 0px;
}

#static-block-3b {
width: 400px;
margin: 0px auto 12px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

.static-block-3b-left {
width: 196px;
float: left;
margin: 0px 4px 0px 0px;
padding: 0px;
}

.static-block-3b-right {
width: 196px;
float: right;
margin: 0px 0px 0px 4px;
padding: 0px;
}

.homepage-column-2 {
width: 264px;
float: right;
margin: 0px 6px 0px 6px;
padding: 0px;
}

.homepage-column-1 {
width: 400px;
float: right;
margin: 0px 0px 0px 6px;
padding: 0px;
}

#random-video {
background: #E9ECEE;
border: 1px solid #C0CCD3;
margin: 0px 0px 6px 0px;
padding: 12px;
}

#banner-300 {
background: #ffffff;
margin: 0px 0px 12px 0px;
padding: 0px;
}

#opinion-poll {
background: #ffffff;
margin: 0px 0px 6px 0px;
padding: 0px;
}

/* ================================================================

You see, all I did was to change the column 1 for column 3 and column 3 to column 1.. I also changed the widths but the borders just stay in the middle of everything..

OK so here’s my question…
How would I align those borders that show up on my front page a little more to the left so they can fit where they are supposed to go…

here’s the blog’s url..
http://bestfinecomputers.com
If you see the Facebook