Small margin that I cannot remove Bootstrap - css

Question

UPDATE: Fixed - I had neglected to wrap my blog partial within <main> tags, which are in place on every other page. Moderators: please delete question if you deem appropriate. I'll leave it here for now.
I've been trying for some time to remove the small margin that appears on the right side of the top image (.mobile-image). I know the placement of the image is poor but it has to be that way to allow for fluid resizing on mobile. I've tried manipulating negative margin values to no avail.
The issue is isolated to the top image but I have put the full HTML so the broader context is there if necessary.
/*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>