title: Align full width image with SVG mask on the right, outside container with Bootstrap
body: <p>I am trying to align an image with a SVG mask to the right, outside of a container but it causes overflow. When I reverse it and align the image on the left it does not cause an overflow.</p>
  <p>Currently I am using the following code to align the image to the right:</p>
  <pre><code>.alignfull {
  margin-right: calc(100% - 50vw);
  }
  </code></pre>
  <p>If there's a better way of doing it, any tips are welcome. I am trying it this way to keep the content vertical center aligned with the content in the container. <code>position: absolute;</code> is therefore not really a solution as far as I know.</p>
  <p>Here's a codepen to demonstrate of what I am having now: <a href="https://codepen.io/monsmado/pen/pobzaVB" rel="nofollow noreferrer">https://codepen.io/monsmado/pen/pobzaVB</a></p>