I am trying to modify my image within a bootstrap container to extend it to the side while keeping the rest of the layout unchanged. Here is what I currently have: https://i.sstatic.net/Mcukl.jpg. There is a gap on the right side of the image that I want to cover (shown by the green line) without affecting the middle of the column (red line). You can see the visual explanation in this image: https://i.sstatic.net/SdVUZ.jpg
However, I am facing difficulties achieving this with the container. I know I could use container-fluid, but I prefer to stick with the container for consistency in my layout. When using container-fluid, the margins are not aligned as neatly as I'd like them to be.
Any help or advice would be greatly appreciated, as I'm struggling to make this adjustment without messing up the entire layout.
EDIT 1
Here is the code snippet that I forgot to include earlier:
<div class="container">
<div class="row">
<section class="col pt-5">
<div>
<h1>Welcome to</h1>
<h1>XE-Designs</h1>
<p>Easy furniture rental with white glove delivery & assembly. Currently in NYC, SF, LA, Baltimore, Richmond, and the DC Area!</p>
</div>
</section>
<section class="col">
<img class="img-fluid w-100" src="~/images/barn-images-t5YUoHW6zRo-unsplash.jpg" />
</section>
</div>
</div>