title: How to expand a column that is inside a container, so that an image could expand from the column middlepoint to the right side of the page?
body: <p>Within bootstrap container I would like to extend my image to the side but keep the rest the same. To make it more explainable; this is what I have at the moment:<a href="https://i.stack.imgur.com/Mcukl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mcukl.jpg" alt="Bootstrap container with sidesbar" /></a>. On the right side of the image there's a gap. I would like to extend the image over that gap (green line) but keep the middle of the column on the same page (red line). Explained in the image: <a href="https://i.stack.imgur.com/SdVUZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SdVUZ.jpg" alt="What I would like" /></a></p>
  <p>But I am having trouble to achieve this with the container. I know I could use container-fluid, but to keep my layout consistant I would like to use container for this matter. Because when I use container-fluid the margins are off and it's not as cleaned lined up as I would like to.</p>
  <p>Thanks in advance, I can't seem to figure this out without messing up the layout.</p>
  <p><strong>EDIT 1</strong></p>
  <p>My bad fogot to add the code; herby my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;section class="col pt-5"&gt;
                      &lt;div&gt;
                          &lt;h1&gt;Welkom bij&lt;/h1&gt;
                          &lt;h1&gt;XE-Designs&lt;/h1&gt;
                          &lt;p&gt;Easy furniture rental with white glove delivery &amp; assembly. Currently in NYC, SF, LA, Baltimore, Richmond, and the DC Area!&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
                      
                  &lt;section class="col"&gt;
                      &lt;img class="img-fluid w-100" src="~/images/barn-images-t5YUoHW6zRo-unsplash.jpg"  /&gt;
                  &lt;/section&gt;
              &lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>