I am facing an issue with a carousel I added to a section of my website using HTML, CSS, and Bootstrap 5. The problem is that after some time, the content and the carousel inside that section disappear. Reloading the page temporarily fixes this issue but it keeps happening repeatedly.
<section class="bg-info text-dark text-center text-sm-start" data-bs-ride="carousel">
<div class="carousel-item active bg-light">
<div class="container" >
<div class="d-sm-flex align-items-center justify-content-center">
<!-- carousel -->
<div class="carousel slide" id="demo" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/very.jpg" class="d-block width1" alt="...">
<div class="carousel-caption d-none d-sm-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="/images/pubg.jpg" class="d-block width1" alt="...">
<div class="carousel-caption d-none d-sm-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="/images/pes.jpg" class="d-block width1" alt="...">
<div class="carousel-caption d-none d-sm-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- carousel -->
<div class="divtwo">
<h1 id="headerOne1" class="text-warning mx-5 px-1 d-sm-block img-fluid w-50 w-ms-auto">Best <span class="text-info">Games</span></h1>
<p class="lead paragraph mx-5 px-1">Looking for more amazing games..?</p>
<button type="button" class="btn btn1 btn-outline-warning">Recommended</button>
</div>
</div>
</div>
</div>
</section>