[Bug] Card não aparece ao lado do carrossel

            <div class="carrossel__container">
                <div class="swiper">
                    <!-- paginação -->
                    <div class="swiper-pagination"></div>
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                    <!-- imagens -->
                    <div class="swiper-slide"><img src="img/Javascript.png" alt="livro javascript"></div>
                    <div class="swiper-slide"><img src="img/Portugol.png" alt="livro Portugol"></div>
                    <div class="swiper-slide"><img src="img/ReactNative.png" alt="livro react"></div>
                    <div class="swiper-slide"><img src="img/Tuning.png" alt="livro Tuning sql"></div>
                    <div class="swiper-slide"><img src="img/Arquitetura.png" alt="livro Arquitetura"></div>
                    <div class="swiper-slide"><img src="img/Nodejs.png" alt="livro nodejs"></div>

                    <!-- botões de navegação -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
                <div class="card">
                    <!--1ª Linha-->
                    <div class="card__descricao">
                        <!--1ª coluna-->
                        <div class="descricao">
                            <h3 class="descricao__titulo">
                                Talvez você se interesse por...
                            </h3>
                            <h2 class="descricao__titulo-livro">
                                Angular 11 e Firebase
                            </h2>
                            <p class="descricao__texto">
                                Construindo uma aplicação integrada com a plataforma do Google.
                            </p>
                        </div>
                        <!--2º coluna-->
                        <img src="img/angular.png" class="descricao__imagem" alt="">
                    </div>
                    <!--2º linha-->
                    <div class="card__botoes">
                        <!--1ºcoluna-->
                        <ul class="botoes">
                            <li class="botoes__item"><img src="img/coracao.png" alt="favoritar livro"></li>
                            <li class="botoes__item"><img src="img/Sacola.png" alt="adicionar no carrinho"></li>
                        </ul>
                        <!--2ºcoluna-->
                        <a href="#" class="botao__ancora">Saiba mais</a>
                    </div>
                </div>
                        </section>
                        <section class="carrossel">
                <h2 class="carrossel__titulo">Mais vendidos</h2>
                <!-- Slider main container -->
                <div class="swiper">
                    <!-- paginação -->
                    <div class="swiper-pagination"></div>
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                    <!-- imagens -->
                    <div class="swiper-slide"><img src="img/MetricasAgeis.png" alt="livro metricas"></div>
                    <div class="swiper-slide"><img src="img/Liderança.png" alt="livro Liderança"></div>
                    <div class="swiper-slide"><img src="img/Gestão.png" alt="livro gestao"></div>
                    <div class="swiper-slide"><img src="img/Gestão2.png" alt="livro Gestão"></div>
                    <div class="swiper-slide"><img src="img/UX.png" alt="livro UX"></div>
                    <div class="swiper-slide"><img src="img/Construct2.png" alt="livro Construct2"></div>

                    <!-- botões de navegação -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
                <div class="card">
                    <!--1ª Linha-->
                    <div class="card__descricao">
                        <!--1ª coluna-->
                        <div class="descricao">
                            <h3 class="descricao__titulo"><img src="img/Estrelinhas.png" alt=""></h3>
#                       
                       <!--1ºcoluna-->
                        <ul class="botoes">
                            <li class="botoes__item"><img src="img/coracao.png" alt="favoritar livro"></li>
                            <li class="botoes__item"><img src="img/Sacola.png" alt="adicionar no carrinho"></li>
                        </ul>
                        <!--2ºcoluna-->
                        <a href="#" class="botao__ancora">Saiba mais</a>
                    </div>
                </div>
            </div>

eu cortei umas partes de conteúdo do código porque não ia caber, mas acho que o problema está na div class= carrossel__container