title: Adding padding to a CSS grid system like 960.gs
body: <p>I'm building a site which makes use of the popular 960.gs 16 column grid system. Here's a screenshot of the relevant part of the design, with the grid columns overlaid on top:</p>
  
  <p><img src="https://i.stack.imgur.com/aYxqk.png" alt="Example of the grid I&#39;m building, mocked in Photoshop"></p>
  
  <p>The issue is the white "popular right now" box. Since this has a white background, I want some padding inside the box. Simple enough: I added a <code>&lt;div&gt;</code> inside the parent one and styled it appropriately with <code>padding: 10px</code> and a white background.</p>
  
  <p>The problem comes when I try to re-use the grid inside an 'inner' <code>&lt;div&gt;</code> like this. for example, inside that white box, I want the link list to be inside a 5 column container, and the image in a 3 column container (sorry, the screenshot doesn't show it at this size). </p>
  
  <p>I tried redefining my grid column sizes inside the <code>.inner</code> class, which partly works - I removed 10 pixels from each column size, since the total width needs to be 20px less than before to account for the margins. This works in the case where there are exactly two child <code>&lt;div&gt;s</code> inside the <code>.inner</code> container, but obviously if there are more or less than 2 then things start to look wrong.</p>
  
  <p>Does anybody have a good strategy for dealing with this kind of thing? I'd be willing to just put the padding on all columns, regardless of background colour, but couldn't get this working like I wanted when hacking the grid.</p>
  
  <p>thanks
  Matt</p>