Как растянуть фон блока за его пределы

Question

Имеется такой блок с текстом:

Как можно растянуть его фоновый цвет на всю ширину экрана?
Менять ширину блока нельзя.

.btn-blue {
  background: #D2E1FF;
  color: #3A79FF;
  font-size: 13px;
  font-weight: 700;
  padding: 1.35em 1.8em;
  border: none;
  border-radius: 0.2em;
}
.btn-blue:hover {
  cursor: pointer;
}

.header-content {
  text-align: center;
  background-color: #F3F6FF;
  margin: 0 auto;
  width: 1206px;

<div class="header-content">
    <p class="plan">PLAN YOUR LIFE</p>
    <h1>Increase Your <span class="prod">Productivity</span></h1>
    <p class="">
        Brute laoreet efficiendi id his, ea illum nonumes luptatum pro. 
        Usu atqui laudem an, insolens gubergren similique est cu. 
        Et vel modus congue vituperata.
    </p>

    <div class="play fa-solid"></div>
</div>

Answer 1

Нашел решение в данном ролике

Вариант №1:

.header-content {
  text-align: center;
  background-color: #F3F6FF;
  width: 100vw;
  -webkit-margin-start: 50%;
          margin-inline-start: 50%;
  transform: translateX(-50%);
}

Вариант №2:

.header-content {
  text-align: center;
  background-color: #F3F6FF;
  box-shadow: 0 0 0 100vmax #F3F6FF;
  -webkit-clip-path: inset(0 -100vmax);
          clip-path: inset(0 -100vmax);
}

Answer 2

Как вариант, весь этот контент завернуть ещё в один див,который не будет иметь ограничения по ширине.

  <div class="header-inner">
      <div class="header-content">
        <p class="plan">PLAN YOUR LIFE</p>
        <h1>Increase Your <span class="prod">Productivity</span></h1>
        <p class="">
            Brute laoreet efficiendi id his, ea illum nonumes luptatum pro. 
            Usu atqui laudem an, insolens gubergren similique est cu. 
            Et vel modus congue vituperata.
        </p>
        <div class="play fa-solid"></div>
      </div>
     </div>

CSS:

.header-inner{
  background-color: #F3F6FF;
}

.header-content {
    text-align: center;
    margin: 0 auto;
    width: 1206px;
}

БЛОГ НА HUSL

Как растянуть фон блока за его пределы

Ответы (2 шт):