Как сделать так, чтобы цвет фона распространялся на мои дробные столбцы, не затрагивая мои центральные столбцы?

Question

Я устанавливаю шаблон для демонстрации того, как использовать определенную часть программы.Я установил страницы в 8-колоночном макете сетки с пустым столбцом 1fr по обе стороны для заполнения.Проблема, с которой я сталкиваюсь, заключается в размещении фона цвета позади содержимого, чтобы сместить содержимое, когда пользователь прокручивает страницу вниз.У меня возникают проблемы с решением, которое охватывает фоновый цвет по всей ширине области просмотра, сохраняя содержимое в 8 сетках.

Я попытался добавить другой класс в тег с именем "bg".Я сделал это, чтобы охватить цвет bg по всему окну просмотра, но затем он вынуждает контент вне центральных 8 сеток, из которого я не хочу, чтобы контент уходил.Я также попытался дать .bg ширину 100vw, но затем он снова переопределяет сетку контента.

HTML

<div class="container">
<section class="cont2 bg">
        <img src="img/perf-2.png" alt="" class="cont2__img">
        <div class="cont2__content">
            <p class="cont2__content--p-1">
                For this example, we are looking at the effects of investing $10,000 in JNJ with a start date of December 1998, and how today that money would be worth about $40,566. 
            </p>
            <p class="cont2__content--p-2">
                These performance results located at the bottom you can find the average dividend growth rate for the timeframe selected with the compounded annual growth rate, the total amount of dividends paid, and the growth breakdown of the stock you are looking at.  
            </p>
            <p class="cont2__content--p-3">
                This is then in comparison to investing in the S&P 500 over the same timeframe.
            </p>
        </div>
    </section>
</div>

CSS (sass)

// Container Grid layout
.container {
    display: grid;
    grid-template-rows: 20vh repeat(4, min-content); // I have 4 content sections for the entire project, so that's why there is repeat 4
    grid-template-columns:  [full-start] minmax(6rem, 1fr) [center-start] 
repeat(8, [col-start] minmax(min-content, 20rem) [col-end]) [center-end] 
minmax(6rem, 1fr) [full-end];
}

// Content Layout
.cont2 {
grid-column: center-start / center-end;
margin: 10rem 0;
padding: 5rem;

grid-row: 3 / 4;

display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); //responsive layout
grid-gap: 4rem;

&__content {
    align-self: center;
    margin-left: 2rem;
    font-size: 2rem;
    &--p-2 {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
}

&__img {
    width: 100%;
}
}


.bg {
//width: 100vw;
//grid-column: full-start / full-end;
background-color: rgb(245, 245, 245);

//I've tried more than the commented out lines, but I've been trying it for a little bit tonight and forgot - sorry
}

Я хочу, чтобы цвет фона .bg растекался по всей странице, сохраняя при этом целостностьсодержание в пределах 8 центральных столбцов.

Заранее спасибо и дайте мне знать, если мне нужно предоставить больше информации.