Currently, I am utilizing a Bootstrap 4 container to center the content of my webpage in the middle of the browser. This is standard procedure.
However, I require something more intricate. The content within the container should break out on the left side and expand towards the browser window, but only on the left side.
Due to my utilization of the slick slider, I am unable to apply position:absolute or any other adjustments to a single object within the container DIV. I need an entire DIV inside the container to extend to the left side, while also aligning it to the right side of the page.
You can view my current code here: https://codepen.io/cray_code/pen/erQJey
This is what I am aiming for - the image within the slides expanding to the left, with the blue background representing the browser window:
https://i.sstatic.net/3AZHV.png
<div class="bg-dark">
<div class="container bg-white">
<div class="slider">
<div><img src="http://via.placeholder.com/2500x500" class="img-fluid"></div>
<div><img src="http://via.placeholder.com/2500x500" class="img-fluid"></div>
<div><img src="http://via.placeholder.com/2500x500" class="img-fluid"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider').slick({
infinite: true,
dots: true,
arrows: false,
draggable: false,
fade:true,
autoplay:true,
autoplaySpeed: 4000,
speed:1200,
})
});
</script>