Google Map won't stretch the full width of the Column-CodePudding

I've googled almost everything I could do to fix this before posting here. Currently, on my project contact page, I have 3 rows with columns inside of a container using Bootstrap 4 grid. The third row is set to col-12 with an iframe containing a google map that will not stretch the full width of the column. I've edited the HTML in the iframe to use 100% height and 100% width but no dice. What am I doing wrong?

<div class="container containerColor">
        <div class="row">
            <div class="col-12 text-center sectionContent bannerBody">
                <h1>contact</h1>
            </div>
        </div>
    
        <div class="row d-flex justify-content-center sectionContent bannerBody">
            <div class="col-xs-12 col-sm-12 col-md-4 sectionContent bannerBody">
                <div class="card cards">
                    <h3 class="card-header cards-header">Hours of Operation</h3>
                    <div class="card-body">
                        <dl class="row d-flex justify-content-center">
                            <dt class="col-6">Sunday</dt>
                            <dd class="col-6">10am - 5pm</dd>
                            <dt class="col-6">Monday</dt>
                            <dd class="col-6">---</dd>
                            <dt class="col-6">Tuesday</dt>
                            <dd class="col-6">---</dd>
                            <dt class="col-6">Wednesday</dt>
                            <dd class="col-6">10am - 5pm</dd>
                            <dt class="col-6">Thursday</dt>
                            <dd class="col-6">10am - 6pm</dd>
                            <dt class="col-6">Friday</dt>
                            <dd class="col-6">---</dd>
                            <dt class="col-6">Saturday</dt>
                            <dd class="col-6">9am - 3pm</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="col-8 col-xs-12 col-sm-12 col-md-8">
                <div class="container" style="overflow-wrap: break-word">
                    <h1>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem eum adipisci quos animi earum repudiandae ipsum ut dignissimos vel suscipit dolor dolores vitae sapiente repellendus asperiores, tempora ea minus quisquam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio distinctio error magni eaque quidem quaerat deleniti aut beatae. Mollitia maxime voluptatum, in magnam sed fuga autem nihil nulla perferendis saepe.
                    </h1>
                </div>
            </div>
                <div class="row d-flex justify-content-center mt-5 mb-5">
                    <div class="col-12">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3220.99444862719!2d-115.2891474483767!3d36.16668971070266!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c8bf86523a6539:0xe2cd727e83aa610d!2s430 S Rampart Blvd #150, Las Vegas, NV 89145!5e0!3m2!1sen!2sus!4v1634184552181!5m2!1sen!2sus"
                            style="border: 2px solid; width: 100%; height: 100%;"
                            allowfullscreen=""
                            loading="lazy"
                        ></iframe>
                    </div>
                </div>
            </div>
        </div>
    <!-- <div > -->
        <div class="row sectionContent">
            <div class="col-12 text-center">
                <h1 class="bannerBody">rachel<wbr />@jackofallfades.co</h1>
            </div>
        </div>
    </div>

CodePudding user response：

You can add w-100 class to gives 100% width to any element.

<div class="row d-flex justify-content-center mt-5 mb-5 w-100">
    <div class="col-12">
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3220.99444862719!2d-115.2891474483767!3d36.16668971070266!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c8bf86523a6539:0xe2cd727e83aa610d!2s430 S Rampart Blvd #150, Las Vegas, NV 89145!5e0!3m2!1sen!2sus!4v1634184552181!5m2!1sen!2sus"
            style="border: 2px solid; width: 100%; height: 100%;"
            allowfullscreen=""
            loading="lazy"
        ></iframe>
    </div>
</div>