Как создать отступ для родительского столбца вложенных столбцов с помощью CSS-сетки (Semantic.gs)

Question

Я использую http://semantic.gs/ качестве моей системы сетки. Я следую примеру вложенного столбца, чтобы попытаться создать то, что я хочу, следуя как можно большему количеству таблиц. Данный пример кода вложенного столбца из 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>

МЕНЬШЕ

article {
   .column(9);

   ul {
      .row(9);

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

Мой вопрос заключается в том, каков наилучший способ добавления отступов (в идеале такой же ширины, как у желобов) к родительскому элементу вложенных столбцов при максимально возможном соблюдении системы координат (semantic.gs)? Обратите внимание, я использую фиксированный макет 960 пикселей.

Вот пример (Photoshop, не совсем в соответствии с приведенным выше кодом) изображения того, чего я пытаюсь добиться с помощью правого и левого отступа родительского элемента бежевого цвета:

ОБНОВЛЕНИЕ: следуя примеру sandeeps, я смог это сделать, но не упомянул, что использую сетку 960px. Вот мои результаты: http://bit.ly/M5fr5N.

Answer 1

Для этого вы можете использовать свойство CSS box-sizing. Напишите так:

#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%;
}