较小的设备（移动设备）右侧剩余的空间

Question

在笔记本电脑屏幕上查看时，右侧没有剩余空间，也无需滚动到右侧即可查看内容。但是，当我在较小的（移动）设备上查看相同内容时，右侧会留出一个空间，并且有一个滚动条可以滚动到我不想要的右侧。

PFB在注释块下面出现问题的代码：

<!-- ========== MAIN CONTENT ========== -->
    <main id="content" role="main">

        <!-- Career Title Section -->
        <div class="container space-top-1 space-top-md-4">
            <div class="position-relative">
                <!-- Title -->
                <div class="w-md-80 w-lg-70 text-center mx-md-auto">
                    <div class="mb-4">
                        <h2 class="h1 text-primary font-size-md-down-3"> <span class="font-weight-semi-bold">Photo
                                Gallery</span>
                        </h2>
                        <p class="text-dark">View the pictures
                        </p>
                    </div>
                </div>
                <!-- End Title -->
            </div>
        </div>
        <!-- End Career Title Section -->


        <!-- FAQ Topics Section -->
        <div class="space-0 space-md-2  pl-2 pr-2 pl-lg-9 pr-lg-9">
            <div class="row">
                <div class="col-md-2 mb-7 ">
                    Content 1 Card will be populated here
                </div>

                <div class="col-md-10">
                    Content 2 Card will be populated here
                </div>
            </div>
        </div>
        <!-- End FAQ Topics Section -->


    </main>
    <!-- ========== END MAIN CONTENT ========== -->

PFB在较小的设备上的屏幕截图，右边有空间。

但是当我在div中使用container时，该问题在小屏幕上得到解决，但是它限制了我左右两侧的填充空间。 PFB下面的代码：

<!-- ========== MAIN CONTENT ========== -->
    <main id="content" role="main">

        <!-- Career Title Section -->
        <div class="container space-top-1 space-top-md-4">
            <div class="position-relative">
                <!-- Title -->
                <div class="w-md-80 w-lg-70 text-center mx-md-auto">
                    <div class="mb-4">
                        <h2 class="h1 text-primary font-size-md-down-3"> <span class="font-weight-semi-bold">Photo
                                Gallery</span>
                        </h2>
                        <p class="text-dark">View the pictures
                        </p>
                    </div>
                </div>
                <!-- End Title -->
            </div>
        </div>
        <!-- End Career Title Section -->


        <!-- FAQ Topics Section -->
        <div class="container space-0 space-md-2  ">
            <div class="row">
                <div class="col-md-2 mb-7 ">
                    Content 1 Card will be populated here
                </div>

                <div class="col-md-10">
                    Content 2 Card will be populated here
                </div>
            </div>
        </div>
        <!-- End FAQ Topics Section -->


    </main>
    <!-- ========== END MAIN CONTENT ========== -->

在较小的屏幕上（移动设备）PFB屏幕截图：

这可能是解决方案。如何删除右边消失的空间。在此先感谢！