white space in between of slides in carousel bootstrap5

I have a problem with carousel, there is white space, full width of one slide in between when sliding. Here is my carousel code:

 <section id="news" class="py-5">
<div class="container">
    <h2 class="text-center mb-4">Latest News</h2>
    <div id="newsCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
        <div class="carousel-inner">
            <!-- Dynamic news items will be injected here -->
        </div>
        <a class="carousel-control-prev" href="#newsCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#newsCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Carousel slides are dynamically inserted from database.
This is how one of slides looks like:

 <img src="./products_img/bagel.jpg" class="d-block w-100" alt="${item.title}">
        <div class="carousel-caption d-none d-md-block">
            <h5>${item.title}</h5>
            <p>${item.content}</p>
        </div>

I got also from server route that is getting data from database, all news from table.
Does somebody see why this is happening and what can I do to fix this?