Carousel Transition Issue

Bootstrap Studio Help
1

Hello! I am trying to make a carousel to display 5 cards in a slide that will be used for a dynamic list for a bookstore website. After getting it to be responsive, when I hit the next button, the 5 images, arrows, and indicators drop below the boundary of where there are supposed to slide, and push all my other page elements down for a brief moment until the books come back up to their original position.

<div id="carousel-2" class="carousel slide" data-bs-ride="false" style="height: auto;width: 100%;">
    <div class="carousel-inner" style="height: auto;">
        <div class="carousel-item active" style="height: auto;margin-right: 0px;">
            <div class="container" style="width: 85%;height: auto;">
                <div class="row" style="height: auto;">
                    <div class="col" style="background: var(--bs-light);margin: 10px;height: inherit;margin-bottom: 30px;padding-right: 0;padding-left: 0px;">
                        <div class="card" style="height: inherit;">
                            <div class="card-body" style="height: auto;padding: 0px;width: auto;"><img style="width: 100%;height: 100%;" src="upload://1433qL5UUv2502wSntnSs3uXKAZ.jpeg"></div>
                        </div>
                    </div>
                    <div class="col" style="background: var(--bs-light);margin: 10px;height: inherit;margin-bottom: 30px;padding-right: 0;padding-left: 0px;">
                        <div class="card" style="height: inherit;">
                            <div class="card-body" style="height: auto;padding: 0px;width: auto;"><img style="width: 100%;height: 100%;" src="upload://1433qL5UUv2502wSntnSs3uXKAZ.jpeg"></div>
                        </div>
                    </div>
                    <div class="col" style="background: var(--bs-light);margin: 10px;height: inherit;margin-bottom: 30px;padding-right: 0;padding-left: 0px;">
                        <div class="card" style="height: inherit;">
                            <div class="card-body" style="height: auto;padding: 0px;width: auto;"><img style="width: 100%;height: 100%;" src="upload://1433qL5UUv2502wSntnSs3uXKAZ.jpeg"></div>
                        </div>
                    </div>
                    <div class="col" style="background: var(--bs-light);margin: 10px;height: inherit;margin-bottom: 30px;padding-right: 0;padding-left: 0px;">
                        <div class="card" style="height: inherit;">
                            <div class="card-body" style="height: auto;padding: 0px;width: auto;"><img style="width: 100%;height: 100%;" src="upload://1433qL5UUv2502wSntnSs3uXKAZ.jpeg"></div>
                        </div>
                    </div>
                    <div class="col" style="background: var(--bs-light);margin: 10px;height: inherit;margin-bottom: 30px;padding-right: 0;padding-left: 0px;">
                        <div class="card" style="height: inherit;">
                            <div class="card-body" style="height: auto;padding: 0px;width: auto;"><img style="width: 100%;height: 100%;" src="upload://1433qL5UUv2502wSntnSs3uXKAZ.jpeg"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="carousel-item" style="height: inherit;width: inherit;margin-right: 0px;">
            <div class="container" style="width: 85%;height: inherit;">
                <div class="row" style="height: inherit;">
                    <div class="col" style="background: var(--bs-light);margin: 10px;height: inherit;margin-bottom: 30px;padding-right: 0;padding-left: 0px;">
                        <div class="card" style="height: inherit;">
                            <div class="card-body" style="height: auto;padding: 0px;width: auto;"><img style="width: 100%;height: 100%;" src="upload://1433qL5UUv2502wSntnSs3uXKAZ.jpeg"></div>
                        </div>
                    </div>
                    <div class="col" style="background: var(--bs-light);margin: 10px;height: inherit;margin-bottom: 30px;padding-right: 0;padding-left: 0px;">
                        <div class="card" style="height: inherit;">
                            <div class="card-body" style="height: auto;padding: 0px;width: auto;"><img style="width: 100%;height: 100%;" src="upload://1433qL5UUv2502wSntnSs3uXKAZ.jpeg"></div>
                        </div>
                    </div>
                    <div class="col" style="background: var(--bs-light);margin: 10px;height: inherit;margin-bottom: 30px;padding-right: 0;padding-left: 0px;">
                        <div class="card" style="height: inherit;">
                            <div class="card-body" style="height: auto;padding: 0px;width: auto;"><img style="width: 100%;height: 100%;" src="upload://1433qL5UUv2502wSntnSs3uXKAZ.jpeg"></div>
                        </div>
                    </div>
                    <div class="col" style="background: var(--bs-light);margin: 10px;height: inherit;margin-bottom: 30px;padding-right: 0;padding-left: 0px;">
                        <div class="card" style="height: inherit;">
                            <div class="card-body" style="height: auto;padding: 0px;width: auto;"><img style="width: 100%;height: 100%;" src="upload://1433qL5UUv2502wSntnSs3uXKAZ.jpeg"></div>
                        </div>
                    </div>
                    <div class="col" style="background: var(--bs-light);margin: 10px;height: inherit;margin-bottom: 30px;padding-right: 0;padding-left: 0px;">
                        <div class="card" style="height: inherit;">
                            <div class="card-body" style="height: auto;padding: 0px;width: auto;"><img style="width: 100%;height: 100%;" src="upload://1433qL5UUv2502wSntnSs3uXKAZ.jpeg"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="carousel-item" style="height: inherit;width: inherit;margin-right: 0px;">
            <div class="container" style="width: 85%;height: inherit;">
                <div class="row" style="height: inherit;">
                    <div class="col" style="background: var(--bs-light);margin: 10px;height: inherit;margin-bottom: 30px;padding-right: 0;padding-left: 0px;">
                        <div class="card" style="height: inherit;">
                            <div class="card-body" style="height: auto;padding: 0px;width: auto;"><img style="width: 100%;height: 100%;" src="upload://1433qL5UUv2502wSntnSs3uXKAZ.jpeg"></div>
                        </div>
                    </div>
                    <div class="col" style="background: var(--bs-light);margin: 10px;height: inherit;margin-bottom: 30px;padding-right: 0;padding-left: 0px;">
                        <div class="card" style="height: inherit;">
                            <div class="card-body" style="height: auto;padding: 0px;width: auto;"><img style="width: 100%;height: 100%;" src="upload://1433qL5UUv2502wSntnSs3uXKAZ.jpeg"></div>
                        </div>
                    </div>
                    <div class="col" style="background: var(--bs-light);margin: 10px;height: inherit;margin-bottom: 30px;padding-right: 0;padding-left: 0px;">
                        <div class="card" style="height: inherit;">
                            <div class="card-body" style="height: auto;padding: 0px;width: auto;"><img style="width: 100%;height: 100%;" src="upload://1433qL5UUv2502wSntnSs3uXKAZ.jpeg"></div>
                        </div>
                    </div>
                    <div class="col" style="background: var(--bs-light);margin: 10px;height: inherit;margin-bottom: 30px;padding-right: 0;padding-left: 0px;">
                        <div class="card" style="height: inherit;">
                            <div class="card-body" style="height: auto;padding: 0px;width: auto;"><img style="width: 100%;height: 100%;" src="upload://1433qL5UUv2502wSntnSs3uXKAZ.jpeg"></div>
                        </div>
                    </div>
                    <div class="col" style="background: var(--bs-light);margin: 10px;height: inherit;margin-bottom: 30px;padding-right: 0;padding-left: 0px;">
                        <div class="card" style="height: inherit;">
                            <div class="card-body" style="height: auto;padding: 0px;width: auto;"><img style="width: 100%;height: 100%;" src="upload://1433qL5UUv2502wSntnSs3uXKAZ.jpeg"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="width: 100%;"><a class="carousel-control-prev" href="#carousel-2" role="button" data-bs-slide="prev" style="height: inherit;width: 8%;margin: 0px;padding-right: 10px;padding-left: 10px;"><span class="carousel-control-prev-icon" style="color: var(--bs-light);filter: invert(100%);"></span><span class="visually-hidden" style="filter: invert(0%);">Previous</span></a><a class="carousel-control-next d-xl-flex" href="#carousel-2" role="button" data-bs-slide="next" style="width: 8%;height: auto;margin: 0px;padding-right: 10px;padding-left: 10px;"><span class="carousel-control-next-icon" style="filter: invert(100%);"></span><span class="visually-hidden">Next</span></a></div>
    <div class="carousel-indicators d-flex d-print-flex d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex flex-shrink-1" style="margin-bottom: 0px;width: auto;padding-top: 0px;height: auto;filter: invert(100%);"><button class="active" type="button" data-bs-target="#carousel-2" data-bs-slide-to="0"></button><button type="button" data-bs-target="#carousel-2" data-bs-slide-to="1"></button><button type="button" data-bs-target="#carousel-2" data-bs-slide-to="2"></button></div>
</div>
2

Create a section, if you want, add a container, add the carousel and add cards to the slides, I hope it helps.