Currently, I am following a tutorial and working on creating the "Getting started" section as shown in the image below:
https://i.sstatic.net/KsOP6.jpg
I have noticed that once I add the CSS for the dark-overlay class, it triggers these unwanted horizontal scrollbars. By commenting out the dark-overlay css, I was able to make the scrollbars disappear.
Below is my code snippet:
<section id="home-heading" class="p-5">
<div class="dark-overlay">
<div class="row">
<div class="col">
<div class="container pt-5">
<h1>Are You Ready To Get Started?</h1>
<p class="d-none d-md-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est eaque magni sit dolores. Nisi, dolor nam modi perspiciatis
consequatur soluta.</p>
</div>
</div>
</div>
</div>
</section>
and this is the included CSS section:
#home-heading {
position: relative;
height: 200px;
background-image: url(../img/lights.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
text-align: center;
color: #fff;
}
.dark-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
}
I am puzzled why the overlay css might be causing this issue, given that the parent element #home-heading is relatively positioned. Shouldn't the dark-overlay class adhere to its parent's position?
If anyone can shed some light on what could be happening here, I would greatly appreciate it.
Thank you, Sohaib