Как задать фон для div который будет выходить за пределы container

Я хочу чтобы фон класса main-box выходил за пределы контейнера и начинался с левого края, как на изображении, как это правильно сделать в CSS?

<section class="main">
        <div class="container">
            <div class="main-box">
                <h1 class="main-title">
                    Отримай знижку в <span class="green-text">-10%</span> при замовленні системи з <span class="green-text">ДСП</span>!
                </h1>
                <div class="main-subtitle__box">
                    <p class="main-subtitle__text">
                        В нас діє акція на <span class="green-text">ВСІ</span> системи для шаф-купе якщо в них входить <span class="green-text">ДСП</span> таких кольорів - <span class="green-text">Аляска Структурна</span>, <span class="green-text">Сонома</span>, <span class="green-text">Алюміній</span>
                    </p>
                    <p class="main-subtitle__text">
                        Встигни зробити замовлення <span class="green-text">до 26.12.2022</span> та отримай свою знижку в <span class="green-text">-10%</span>!
                    </p>
                </div>
                <button class="main-btn">ТОВАРИ</button>
            </div>
        </div>
    </section>