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

Существуют различные варианты реализации задачи, но я предлагаю рассмотреть два из них, использующих только CSS и не привязанные к абсолютному значению ширины родительского контейнера. Это делает рассматриваемые варианты универсальными, не требующими внесения изменения в HTML код страницы, что позволяет эффективно использовать их с системами управления контентом.

Следующий фрагмент HTML кода показывает типичную разметку страницы: внутри элемента класса .container размещается контент страницы, ограниченный по ширине и расположенный горизонтально по центру страницы, при этом контейнер класса .full-width должен выходить за пределы родительского элемента, занимаяя всю ширину страницы.

<style>
  .container {
    max-width: 60em;
    margin-left: auto;
    margin-right: auto;
  }
</style>
<div class="container">
  <p>...</p>
  <div class="full-width">Я должен занять всю ширину страницы!</div>
  <p>...</p>
</div>

Обязательным условием успешного применения рассматриваемых далее вариантов получения контейнера шириной в полную ширину страницы, является горизонтальная центровка родительского элемента, что в приведённом примере достигается заданием свойств margin-left: auto и margin-right: auto для элемента класса .container.

Вариант № 1

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

При использовании этого варианта происходит автоматическое вычисление горизонтальных отступов элемента с использованием CSS функции calc().

Вариант № 2

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Результат использования этого варианта аналогичен предыдущему, но не требует использования расчётов значений горизонтальных отступов с CSS функцией calc().

Какой из предложенных вариантов получения контейнера шириной в полную ширину страницы использовать на практике - ваш выбор, но необходимо учитывать, что оба рассмотренных варианта требуют поддержки браузером единиц измерения viewport. Кроме того, с целью предотвращения появления полосы горизонтальной прокрутки, для элемента body следует задать свойство overflow-x: hidden.