我无法删除Bootstrap的小额利润

Question

更新：已修复-我忽略了将博客的部分内容包装在<main>标签中，该标签在每隔一页上就位。主持人：如果您认为适当，请删除问题。我会暂时留在这里。

我一直在尝试删除顶部图像（.mobile-image）右侧出现的小边距。我知道图片的位置很差，但必须采用这种方式才能在移动设备上调整流体大小。我试图操纵负保证金值无济于事。

该问题仅显示在顶部图像中，但是我已经放置了完整的HTML，因此在必要时可以使用更广泛的上下文。

/*Single blog post template*/

//Blog header
.blog-jumbo-header{
    margin-top: 80px;
     padding-left: 150px;
     padding-right: 100px;
     padding-bottom: 20px;
     @include media-breakpoint-down(md) {
        padding:5% 3% 5% 3%;
        }     
}

.background-wrapper{
    background-color: #e3e7f2;
    @include media-breakpoint-down(md) {
        margin-bottom: 1em;
    }
}

.single-blog-page-body {
    margin-top: 70px;
    @include media-breakpoint-up(md) {
        padding-left: 165px;
    }
    @include media-breakpoint-down(md) {
        padding-left: 15px;
        margin-top:0px; 
        }   
    }           

.title-block{
@include media-breakpoint-up(xl) {
    margin-top: 30px;
    padding-right: 80px;
    }
    @media only screen and (min-width: 1550px) { 
        margin-top: 30px;
        padding-right: 80px;
        } 
        @media only screen and (min-width: 1001px) and (max-width:1150px){
            min-width: 350px;
        } 
            @media only screen and (min-width: 1050px) { 
                padding-top: 50px;
                padding-right: 30px;
                } 
                .category{
                    text-transform: uppercase;
                    font-weight: 300;
                    }
                    .top-heading{
                        padding-top: 10px;
                        padding-bottom: 10px;
                            @media (max-width: 1350px) {
                                font-size: 44px;
                                }
                        }
                        .blog-lead{
                            font-size: 1.2em;
                            font-weight: 300;
                            line-height: 28px;
                            }    
    }

//Images 

//Main header image
.blog-image{
    padding-right: 40px;
        padding-left: 50px;
        padding-top: 20px;
        width:850px;
        @media only screen and (max-width: 1550px){
            width:700px;
            margin-top: 70px;   
            }
            @media only screen and (max-width: 1400px){
                width:650px;
                margin-top: 100px;   
                }
                @media only screen and (max-width: 1200px){
                    width:550px;
                    margin-top: 100px;   
                    }
                    @media only screen and (min-width: 1001px) and (max-width:1150px){
                        width:420px;
                    } 
                        @media only screen and (max-width: 1000px){
                        display:none;   
                        }
    }

//Main header image, styled full-width for mobile
.mobile-image{
     width:100%;
     margin: 85px -5px -80px -5px;
     @media only screen and (min-width: 999px) { 
        display: none;
        } 
    }

//Author bubble image
    .author-bubble{
        width: 70px;
        @media only screen and (max-width: 1350px) { 
            width: 50px;
            }   
    }

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="background-wrapper">
  <!--Mobile full width image starts-->
  <img src="https://dummyimage.com/800x450/000/fff.png" class="mobile-image">
  <!--Mobile full width image ends-->
    <!--Blog jumbo header-->
      <div class="jumbotron-fluid blog-jumbo-header">
        <div class="container-fluid ">  
          <!--Title/category flex block-->
        <div class="d-flex flex-row ">
         <div class="title-block">
            <div class="d-flex flex-column">
                <!--Category-->
                <div class="">
                    <span class="h5 category">Category</span>
                </div>
                    <!--Post title-->
                    <div class="">
                        <h1 class="top-heading display-4">Title</h1>
                    </div>
                        <!--Post lead-->
                        <div class="">
                            <p class="blog-lead">
                                Lead lead lead lead lead lead lead lead
                            </p>
                        </div>
                            <!--Author info-->    
                            <div class="d-flex flex-row align-items-center pt-2">
                                    <div class="d-flex flex-column pl-2 ">
                                        <div class="">
                                            <span>
                                                Author
                                            </span>
                                        </div>
                                            <!--Date--> 
                                            <div class="">
                                                <span style="font-weight: 300;">
                                                    Date
                                                </span>
                                            </div>
                                    </div>    
                            </div>    
            </div>  
        </div>           
      
      </div>
</div>      
        </div>         
    <!--Blog image flex block-->   
    <div class="d-flex flex-row "> 
        <div class="d-flex flex-column">
            <div class=" blog-image">
                <img class=" img-fluid" src="{{ site.baseurl }}/assets/images/blog/{{ page.image }}" />
            </div>
        </div>    
    </div>  
    </div>
    </div> 
</div>