Как растянуть контейнер на всю ширину css

Есть несколько способов как сделать так, чтобы нужный блок занимал всю ширину видимой части браузера(viewport), или родительского блока. Если необходимо чтобы элемент занял всю ширину родительского элемента (который в свою очередь может быть задан в px или rem), то нужно просто указать:

.example {
  width: 100%;
}

Если необходимо что бы элемент занимал всю ширину видимой части браузера, то необходимо выставить:

.example {
  width: 100vw;
  /* И по аналогии с высотой, если требуется */
  height: 100vh;
}

Блочный элемент — <div>, <section>, <header> — и так занимает всю ширину родителя. Если не растягивается, его ограничивает одно из правил ниже.

На всю ширину родителя

.container {
  width: 100%;
}

Проверьте, нет ли у элемента max-width или display: inline-block. Если есть padding и рамка, добавьте box-sizing: border-box, иначе блок станет шире родителя.

На всю ширину окна

Если родитель уже экрана, например ограничен max-width: 1200px, растяните блок на ширину окна:

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

100vw — ширина окна браузера, отрицательный отступ сдвигает блок к левому краю экрана.

На Windows 100vw включает ширину полосы прокрутки, и появится горизонтальный скролл. Его скрывает overflow-x: clip у body.

Обычная схема вёрстки

Фон секции на всю ширину, содержимое по центру:

<section class="hero">
  <div class="container">Текст</div>
</section>

Во flex-контейнере

Дочерний элемент flex-контейнера по умолчанию сжимается по содержимому. Растянуть:

.item {
  flex: 1;          /* занять всё свободное место */
}

В колонке (flex-direction: column) элементы растягиваются по ширине сами, если у родителя не задан align-items.

Абсолютно позиционированный блок

.overlay {
  position: absolute;
  left: 0;
  right: 0;
}

Блок растянется на ширину ближайшего родителя с position: relative.

Сетки и контейнеры разбирают в курсе «Профессиональная вёрстка».