title: How to ignore width of container, overflow to right, without breaking page?
body: <p>I want to be able to have the slider within the container on the left side, but ignore the right width and go full-width without going out of the page(html/body).</p>
  <p>I've tried everything, but just not able to fix it.</p>
  <p>I have a bootstrap 5 container and I want to have a owl slider inside of it or anything for that matter.</p>
  <p>I've tried overflows, white-space, width: 100%;</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;overflow-slider&quot;&gt;
      @for ($i = 0; $i &lt; 7; $i++)
      &lt;img src=&quot;https://via.placeholder.com/150&quot; class=&quot;yeah&quot;&gt;
      @endfor
  &lt;/div&gt;
  &lt;/div&gt;
  
  .container {
          position: relative;
      }
      .overflow-slider {
          display: flex;
          overflow: auto;
          position: absolute;
          white-space: nowrap;
          width: 100vw;
      }
  </code></pre>
  <p>This is what I want to achieve, without going out of the page, but right now its going all the way to the right and breaking the page.</p>
  <p>This is mine</p>
  <p><a href="https://i.stack.imgur.com/nuEsI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nuEsI.jpg" alt="this is how i want it" /></a></p>
  <p>And this is how I want it</p>
  <p><a href="https://i.stack.imgur.com/7jDET.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7jDET.jpg" alt="this is how i want it" /></a></p>