As a newcomer to HTML and CSS, I find myself nearing completion of my website, with the final obstacle being an image slider in the background.
The Challenge: The images are not perfectly centered within the viewport. Specifically, the first image needs padding on the left side and should maintain vertical alignment as it expands to match the viewport's height. It should remain centered behind the page's content.
New Challenge: As the width of the first image exceeds the viewport's width, the images start to shift off-center due to their confinement to the left edge of the parent container/viewport. Is there a way for child elements to extend beyond their parent's boundaries?
Any experienced web developers out there who could lend me a hand with this issue?
For a complete version of the website on CodePen, please visit: CodePen Link
To observe the problem, switch to "Full View", resize your browser window, and reduce its width.
Below is the HTML code for the slider:
<!-- Inside <html></html> and after <head></head> -->
<div class="background_carousel">
<div class="carousel_slides">
<div class="slide">
<img src="./img/slideshow/s%20(1).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(2).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(3).jpg">
</div>
</div>
</div>
And here is the CSS for the slider...
.carousel_slides {
display: flex;
background-color: #999999;
width: max-content;
text-align: center;
}
.carousel_slides .slide {
position: static;
height: 100vh;
width: 100vw;
}
.slide img{
height: 100%;
}
A big thank you in advance!