Seeking assistance with coding for a website, I have encountered an issue where I need the background to be relative to the user's screen width. However, I am struggling to find the right approach.

I have attempted using relative units and media queries as demonstrated in the code below. Additionally, I experimented with a classic container which somewhat worked, but as the page shrinks, it eventually reaches the browser window's borders. My objective is to create a small white space between the end of the browser window and the "background-dark-white" that adjusts according to the user's page width.

<section id="jobs">
    <div class="container-fluid background-dark-white pt-4 pb-3 shortest">
        <div class="container-fluid shorter-inner">
            <div class="row">
                <div class="col-md-6 col-lg-4 mt-3 mb-0 mx-auto">
                    <div class="card">
                        <img src="../images/painting.jpg" alt="painting-image" class="card-img-top">
                        <div class="card-body background-dark-white">
                            <h4 class="card-title text-capitalize">painting</h4>
                            <p class="card-text">
                            <h5 class="text-grey font-weight-light pb-3 pt-1">Draw an artwork.</h5>
                        </div>
                    </div>
                </div>
                <!--End of technology card-->
                <!--Marketing card-->
                <div class="col-md-6 col-lg-4 mt-3 mb-0 mx-auto card-width-longer">
                    <div class="card">
                        <img src="../images/engineering.jpg" alt="engineering-image" class="card-img-top">
                        <div class="card-body background-dark-white">
                            <h4 class="card-title text-capitalize">engineering</h4>
                            <p class="card-text">
                            <h5 class="text-grey font-weight-light pb-3 pt-1">Assemble the parts together.</h5>
                        </div>
                    </div>
                </div>
                <!--End of marketing card-->
                <!--Design card-->
                <div class="col-md-6 col-lg-4 mt-3 mb-0 mx-auto card-width-longer">
                    <div class="card">
                        <img src="../images/computing.jpg" alt="computing-image" class="card-img-top">
                        <div class="card-body background-dark-white">
                            <h4 class="card-title text-capitalize">computing</h4>
                            <p class="card-text">
                            <h5 class="text-grey font-weight-light pb-3 pt-1">Write an amazing computer program.</h5>
                        </div>
                    </div>
                </div>
                <!--End of design card-->
                <!--Product card-->
                <div class="col-md-6 col-lg-4 mt-3 mb-0 mx-auto card-width-longer">
                    <div class="card">
                        <img src="../images/advertising.jpg" alt="advertising-image" class="card-img-top">
                        <div class="card-body background-dark-white">
                            <h4 class="card-title text-capitalize">advertising</h4>
                            <p class="card-text">
                            <h5 class="text-grey font-weight-light pt-1">Know advanced advertising tactics.</h5>
                        </div>
                    </div>
                </div>
                <!--End of product card-->
                <!--Service card-->
                <div class="col-md-6 col-lg-4 mt-3 mb-0 mx-auto card-width-longer">
                    <div class="card">
                        <img src="../images/servicing.jpg" alt="servicing-image" class="card-img-top">
                        <div class="card-body background-dark-white">
                            <h4 class="card-title text-capitalize">servicing</h4>
                            <p class="card-text">
                            <h5 class="text-grey font-weight-light pt-1">Provide quality services worldwide.</h5>
                        </div>
                    </div>
                </div>
                <!--End of service card-->
                <!--Selling card-->
                <div class="col-md-6 col-lg-4 mt-3 mb-0 mx-auto card-width-longer">
                    <div class="card">
                        <img src="../images/writing.jpg" alt="writing-image" class="card-img-top">
                        <div class="card-body background-dark-white">
                            <h4 class="card-title text-capitalize">writing</h4>
                            <p class="card-text">
                            <h5 class="text-grey font-weight-light pt-1">Write a book and express yourself.</h5>
                        </div>
                    </div>
                </div>
                <!--End of selling card-->
                <!--End of the benefits section-->
            </div>
        </div>
    </div>
</section>

Included below are all CSS adjustments implemented:

.shortest {
  max-width: 100rem;
  width: 100%;
  max-width: 90rem;
}
.shorter-inner {
  max-width: 100rem;
  width: 100%;
  max-width: 76rem;
}

@media only screen and (min-width: 1200px) {
  .shortest {
    max-width: 100rem;
  }
}
@media only screen and (min-width: 992px) {
  .shortest {
    max-width: 70rem;
  }
}
@media only screen and (min-width: 768px) {
  .shortest {
    max-width: 50rem;
  }
}
@media only screen and (min-width: 600px) {
  .shortest {
    max-width: 40rem;
  }
}

In need of guidance - could my issue stem from incorrect application of media queries? Grateful for any support provided!