Обычно я устанавливаю значение border-box для всех элементов на сайте, благодаря чему расчёт ширины и высоты элементов работает последовательно и интуитивно понятно. Вот как я это делаю:

html {
  box-sizing: border-box;
}*,
*:before,
*:after {
  box-sizing: inherit;
}

Примечание: если вам нужно более детальное объяснение работы свойства box-sizing, я рекомендую вам прочесть эту статью .

Шаг 3: создание контейнера сетки

У каждой сетки есть контейнер, определяющий её максимальную ширину. Как правило, я называю его .l-wrap. Префикс .l- означает layout (раскладка). Я использую такое именование с тех пор, как изучил SMACSS , методологию Джонатана Снука .

.l-wrap {
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto;
}