[SOLVED] Css rows offsetting to the right.
 

http://it-teacher.co.uk/armine/

Anyone got any idea what I'm doing wrong here? Whichever order I put the three rows containing the slider, blue widgets and green widgets, the second two are offset to the right.

I've tried moving the slider to the bottom - same thing happens. Green widgets row and slider row offset to the right by around 20px.

I've tried adding a cf.

What am I doing wrong? Obviously something, but what??

1) What code did you use to build the rows - copy and paste it to a reply
2) how is the width of the slider defined? Is it an option?
3) are you using a slider plugin? If so which?

There is a left margin on those two widget rows. Just set the left margin for those two widget rows to 0.

Let me elaborate on Larry's reply.

You've picked a 100% grid with a 0.8% margin for your site. What this means is that the elements will stretch out across the entire width of the page, and that there will be spacing between the elements equal to 0.8% of the page width. The rule which makes this happen is this:
What this rule says is that each immediate <div> child inside of a row will be floated left and, more importantly, there will be some blank spacing to the left equal to 0.8%. So if you have five elements stretching across the width of the row, there will be some spacing separating each element.

However, this rule will also affect the very first element, and you don't need, or want, that blank space to the left of the first element, you want it flush with the left edge of the page. That's why there is this rule a little bit further down:
What this rule does, then, is eliminate the blank space before the first element, so there's only spacing in between the elements.

What you've done is to put three widget rows inside another row (main). So the first rule gets applied to the three widget rows by applying a margin-left of 0.8% to them, but then the second rule gets applied to the first row, removing the leading spacing. That's why you see spacing before the second and third rows, but not the first.

What you should do, then, is just remove the row class from the main <div>. Then each widget row can stand alone as a separate row. It shouldn't affect the content <div>, which is empty anyway. Or you can move the widget rows outside (above) the main <div> if you plan on having other content in the content section.

CrouchingBruin - thank you so much. That was the answer. I owe you a large beer.