Properly aligning widget areas on the homepage…?

Hey guys, I am having a problem with a theme I am developing and was hoping for a bit of guidance on this. Just to be sure everyone knows, I am a freelance web designer and most everything I do is in photoshop. I do know a good bit of html and a good bit of css and I am somewhat familiar(not impressively talented with but familiar with)PHP. However, this is the very first theme that I have tried to build from scratch and will be the first time I have ever really hand coded everything out my self.
I am building this on my local host (wamp) but I can upload and activate it on a domain somewhere if necessary. Here is the problem that I am having.
I am adding a homepage template to be used for the home page. The template is selectable from the new page editor.
The home page has no content areas except for the widget boxes and the header with menu, a slider that will be coded in and the footer.
The widget areas are 2 rows. Each row is styled separately (the top row background color is peach and the lower row background color is green and there are 3 widgets going left to right on each row. These are separated by 2 containers, one with the style for the top row and one for the style of the lower row.
I have them all lined up nice and pretty and they work great as long as I only add one (yes only one) text widget to each sidebar block in the widgets admin page. If i add a second widget to the same sidebar block, it breaks my container and causes the second widget to push left or right and knock my other 2 widgets left or right and down one row. I have tried many ways to fix this in css including assigning left:10px; to one, left:310px to the second and left 620px to the third and of course I changed all of the corresponding css to match that but then it just pushed all of the boxes out side of my body and all the way over to the lefty side of the screen. Also when I used that method, when the browser is re-sized, the boxes follow the side of the screen not the inside of my wrapper. So anyways, Now i have it all; back to being lined up and staying in the container properly, but I am still left with the putting more than one widget into a sidebar block breaks my design. So what I am hoping to find out is why the addition of a second item is breaking the container left and right and how to stop it. I am assuming it has something to do with the fact that I have a float:right for one of my classes… here is my code maybe someone can see what I am missing. Thanks Guys… ??
[Code moderated as per the Forum Rules. Please use the pastebin]

and here is the css that styles that stuff.
[CSS moderated as per the Forum Rules. Please just post a link to your site.]

Please be gentle and remember that I a mostly a designer with limited knowledg in doing all of this myself.