display: flex não está funcionando

Adicionei a div com a classe carrossel__container e o css referente a ela igual mostrado na aula, porém quando abro a pagina com o live server, não está pegando o display: flex; e o card continua embaixo e não ao lado do carrossel.

    <section class="carrocel">
      <h2 class="carrocel__titulo">ÚLTIMOS LANÇAMENTOS</h2>
      <!-- Slider main container -->
      <div class="carrossel__container">
       <div class="swiper">
        <!-- Additional required wrapper -->
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide">
            <img
              src="img/ApacheKafka.svg"
              alt="Livro sobre apache kafka e spring boot da alura books"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="img/Liderança.svg"
              alt="Livro sobre liderança da alura books"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="img/Javascript.svg"
              alt="Livro sobre javascript assertivo da alura books"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="img/Guia Front-end.svg"
              alt="Livro guia front end da alura books"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="img/Portugol.svg"
              alt="Livro sobre Portugol da alura books"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="img/Acessibilidade.svg"
              alt="Livro sobre Acessibilidade da alura books"
            />
          </div>
        </div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <div class="card">
          <div class="card__descricao">
            <div class="descricao">
              <h3 class="descricao__titulo">Talvez você também 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>
            <img src="img/Angular.svg" class="descricao__imagem" alt="Logo Alura - Quadrado azul, com escudo vermelho e um A maiúsculo branco ao centro">
          </div>

          <div class="card__botoes">
            <ul class="botoes">
              <li class="botoes__item">
                <img src="img/Favoritos.svg" alt="favoritar livro">
              </li>
              <li>
              <img src="img/Compras.svg" alt="adicionar ao carrinho de compras">
              </li>
            </ul>
            <a href="#" class="botoes__ancora">Saiba mais</a>
          </div>
        </div>
      </div>
    </section>

@media screen and (min-width: 1728px) {
  .carrossel__container {
    display: flex;
    margin: 0 20vw 3em 20vw;
    align-items: center;
  }
  }

OBS: sei que carrossel está escrito errado nas outras classes, logo que terminar a pagina irei corrigir isso.