How to have padding on parent column of nested columns with a CSS Grid (Semantic.gs)

Question

I'm using Semantic.gs as my grid system. I'm following the nested column example to try and create what I want while following the grids as much as possible. Given nested column example code from Semantic.gs:

HTML

<article>
   <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
   </ul>
</article>

LESS

article {
   .column(9);

   ul {
      .row(9);

      li {
         .column(6,9);
      }
   }
}

My question is, what's the best way to go about adding padding (ideally the same width as the gutters) to a parent of nested columns, while adhering to the grid system (semantic.gs) as much as possible? Note, I am using a fixed layout of 960px.

Here's an example (Photoshop, not exactly according to code above) image of what I'm trying to achieve with the right and left padding on the beige color parent element:

UPDATE: Following sandeeps example I was able to do this, but I did fail to mention I am using a 960px grid. Here are my results: http://bit.ly/M5fr5N.

Answer 1

You can use CSS box-sizing property for this. Write like this:

#maincolumn {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
    background: none repeat scroll 0 0 red;
    display: inline;
    float: left;
    margin: 0 1.04167%;
    width: 72.9167%;
}