引导程序全屏模式右侧错误

如何解决引导程序全屏模式右侧错误

正在尝试引导全屏模式。我可以看到模态，但右侧有空间。它并没有扩展整个屏幕。单独运行时，相同的代码可以起作用，如以下链接中所示：https://mdbootstrap.com/snippets/jquery/mustafaozkaya/789907?action=fullscreen。 但是，当我与我的实际代码集成时，就会造成混乱。使用引导程序和CSS代码检查图像的模态外观。 请参见下图： Check the highlighted area.

下面是代码：

  .modal-dialog-full-width {
         width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width:none !important;

    }

    .modal-content-full-width  {
        height: auto !important;
        min-height: 100% !important;
        border-radius: 0 !important;
        background-color: #ffffff !important 
    }

    .modal-header-full-width  {
        border-bottom: 1px solid #9ea2a2 !important;
    }

    .modal-footer-full-width  {
        border-top: 1px solid #9ea2a2 !important;
    }

            .row > div {
                padding: 0 5px !important;
            }

            img {
                margin-top: 8px;
                vertical-align: middle;
}

     <!-- =======Pop UP Section ======= --> 
<div class="container">            
            <!-- Modal -->
            <div class="modal fade right" id="exampleModalPreview" tabindex="-1" role="dialog" aria-labelledby="exampleModalPreviewLabel" aria-hidden="true">
                <div class="modal-dialog-full-width modal-dialog momodel modal-fluid" role="document">
                    <div class="modal-content-full-width modal-content ">
                        <div class=" modal-header-full-width   modal-header text-center">
                            <h5 class="modal-title w-100" id="exampleModalPreviewLabel">This is trial pop up</h5>
                            <button type="button" class="close " data-dismiss="modal" aria-label="Close">
                                <span style="font-size: 1.3em;" aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <!-- ===============Below div is Middle part of popup-->
                        <div class="modal-body">
                           <!--                Start Photos-->
                            <div>
                                <div class="container">
                                    <div class="row"> 
                                        <div class=" col-sm-6 col-xs-6">
                                            <img src="https://www.w3schools.com/w3images/wedding.jpg"  class="img-fluid">
                                            <img src="https://www.w3schools.com/w3images/ocean.jpg"  class="img-fluid">
                                             
                                        </div>
                                        <div class="col-sm-6 col-xs-6">
                                            <img src="https://www.w3schools.com/w3images/underwater.jpg"  class="img-fluid">
                                            <img src="https://www.w3schools.com/w3images/ocean.jpg"  class="img-fluid">
                                             
                                        </div>  
                                    </div>
                                </div>
                            </div>
                            <!--                End Photos-->
                            <div class="container-fluid">
                                <h1 class="section-heading text-center wow fadeIn my-5 pt-3"> Not for money,but for humanity</h1>
                            </div>

                            
                        </div>
                        <!-- ===============Below div is close button-->
                        <div class="modal-footer-full-width  modal-footer">
                            <button type="button" class="btn btn-danger btn-md btn-rounded" data-dismiss="modal">Close</button>
                        </div>

                    </div>
                </div>
            </div>
        </div>        
         <!-- =======End Pop Up Section ======= --> 

请帮助我在模式和滚动条之间留出右侧空间。

谢谢！