Допустим, у нас есть страница, состоящая из этажей. Содержательная часть каждого этажа занимает определённую долю ширины окна браузера. Но фон каждого этажа при этом может дотягиваться до краёв окна. Например:

Если страница резиновая, можно просто задать каждому этажу нужные поля:

.header,
.content,
.footer {
  padding-left: 5%;
  padding-right: 5%;
}

Если таких блоков много, можно использовать служебный класс и применять его к этажам

/* style.css */
.holder {
  padding-left: 5%;
  padding-right: 5%;
}<!-- index.html -->
<div class="header holder">
  <!-- ... -->
</div>

<div class="content holder">
  <!-- ... -->
</div>

<div class="footer holder">
  <!-- ... -->
</div>

Такой способ не подойдёт, если содержимое страницы занимает фиксированную ширину и, следовательно, размер полей неизвестен. В этом случае можно создать служебный блок и оборачивать в него содержимое на каждом этаже:

/* style.css */
.holder {
  width: 900px;
  margin: auto;
}<!-- index.html -->
<div class="header">
  <div class="holder">
    <!-- ... -->
  </div>
</div>

<div class="content">
  <div class="holder">
    <!-- ... -->
  </div>
</div>

<div class="footer">
  <div class="holder">
    <!-- ... -->
  </div>
</div>

Содержимое будет ограничено с помощью блока .holder, а фон или рамки можно задавать родительскому блоку:

.header {
  background: url('trees.jpg');
}

.footer {
  border-top: 1px solid lightgray;
}