Как разместить фон за пределами контейнера?

Question

[by_ultra]

Всем доброго дня.
Подскажите, как разместить фон за пределами контейнера, что он простирался на всю ширину экрана?
У div с классом .minimal__amount-mobile.
Спасибо.

<div class="container">
  <div class="basket__box">
               <p class="basket__title">
                  Корзина<sup class="sup__mobile">1</sup>
               </p>
    <div class="minimal__amount-mobile">Минимальная сумма заказа 1 000 руб</div>
  </div>
</div>

.container {
   max-width: 1300px;
   margin: 0 auto;
   padding: 0 15px;
}

.basket__title {
    text-transform: none;
    letter-spacing: normal;
    font-size: 27px;
    line-height: 27px;
    margin-bottom: 11px;
}
.minimal__amount-mobile {
      font-size: 14px;
      line-height: 17px;
      @include Anc400;
      color: #ee2020;
      padding: 9px 0px 13px;
      display: flex;
      justify-content: center;
      margin-bottom: 15px;
      background: pink;
   }

Comments

[Ankhena]

Задать псевдоэлемент абсолютом с шириной 100vw
И overflow для ближайшего родителя имеющего ширину окна.
https://jsfiddle.net/593mfko0/

Либо вытащить блок из контейнера, задать обертку и ей цвет.

[by_ultra]

Ankhena, Спасибо помогло :)

Answer 1

[Александр Макаров]

Оберни контейнер в див, и задай этому диву background-color

Comments

[by_ultra]

Уточнение:
мне нужно, чтобы фон выходил за границы контейнера у div с классом .minimal__amount-mobile

[Александр Макаров]

by_ultra, тогда отрицательный маржин к .minimal__amount-mobile.
Но лучше тогда именно над этим блоком сделать див с нужными падингами и ему задать бг. Так будет правильнее