Почему добавление поля к моему div вытесняет его содержимое (столбцы) со страницы?

Поля CSS добавляются к за пределами элемента. Если у вас есть <div> с шириной 100% и вы добавляете 5% поля с обеих сторон, этот элемент теперь имеет ширину 110%.

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

main {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

Если для ширины и поля используются разные единицы измерения (например, ширина: 100%, поле: 24 пикселя), вы можете использовать css калькулятор:

main {
  width: calc(100% - 48px);
  margin-left: 24px;
  margin-right: 24px;
}

В приведенном ниже фрагменте единственная разница между первой строкой и второй — это поля. Обратите внимание, что сами коробки имеют одинаковый размер. Маржа добавляется нестандартно.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.grid {
  background-color: white;
  background-image: linear-gradient(transparent 24px, #999 25px), linear-gradient(90deg, transparent 24px, #999 25px);
  background-size: 25px 25px, 25px 25px;
  background-position: 1px 1px;
  height: 100vh;
}

.container > div {
  display: inline-block;
  width: 100px;
  background: bisque;
  margin: 0 21px 22px 0;
  min-height: 50px;
}

.container.second > div {
  background: tomato;
  margin: 0 46px 15px 0;
}

<div class = "grid">
  <div class = "container first">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

  <div class = "container second">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Объяснение различных частей:

Content - Содержимое поля, где появляются текст и изображения

Padding — очищает область вокруг контента. Прокладка прозрачная

Border — граница, охватывающая отступы и содержимое.

Margin - Очищает область за границей. Маржа прозрачная

Общая ширина элемента должна быть рассчитана следующим образом:

Общая ширина элемента = ширина + левый отступ + правый отступ + левая граница + правая граница + левое поле + правое поле

Общая высота элемента должна быть рассчитана следующим образом:

Общая высота элемента = высота + верхний отступ + нижний отступ + верхняя граница + нижняя граница + верхнее поле + нижнее поле

div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. 
Total width here becomes:

300px (width)
+ 100px (left + right padding)
+ 30px (left + right border)
+ 40px (left + right margin)
= 470px
</div>