I’m moving over to Responsive Design and testing Foundation 3 on a website. I haven’t used grid systems much and would like to know how best to achieve gutters.
My test site here [http://diskbacker.com](http://diskbacker.com “Diskbacker”) shows the issue I need to resolve.
I have the content div and sidebar div highlighted with background colors to show what is going on. They touch each other by default. In the final design I’d like to add background colors to these but with a gutter in between.
How do I add some separation between the content div and the sidebar div? Adding a padding-right value to #content only pads the text.
I’ve tried your method too Paulie_D and this doesn’t seem to break anything, so may be the way forward.
Does it follow that this would be the best method to keep the maximum screen width as it drops down onto smaller devices? I’m thinking of smartphones which are already tight for space.