How to make the green background color fill the entire width of the home section?

Question

How do I add the rest of the background color, green, to its full width in my home section? Due to my image, which is expanding into the supposed container:

Click to view the Image: https://i.stack.imgur.com/3R3jn.jpg

Although I add a container div to my container home and set a max-width, my photo won't expand indefinitely, but the code for my solution to add something to the container is not applied. Here is my applied code for it:

HTML Code:

        <!-- HOME -->
        <section class="home" id="home">
            <!-- Whole Home Container of the Grouped Elements -->
            <div class="home_container bd-grid">
                <!-- Home Greeting -->
                <h1 class="home_title"><span>HE</span><br>LLO.</h1>

                <!-- Click to scroll down -->
                <div class="home_scroll">
                    <a href="#about" class="home_scroll-link"><i class='bx bx-up-arrow-alt'></i>Scroll down</a>
                </div>

                <img src="/assets/img/joron.png" alt="Joron's Picture" class="home_img">
            </div>
        </section>

CSS Code:

.main-1 {
    max-width: 1200px;
    margin: 0 auto;
}

.container {
    width: 100%;
    background-color: var();
}

Output (Supposed Problem): https://i.stack.imgur.com/S1Q7j.jpg

I hope your answers resolve the problem. Thanks for the tip and assistance!!!