Display flex não funciona e card fica embaixo do carrossel

 <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
            <!-- Slides -->
                <div class="swiper-slide"><img src="style/Guia Front-end.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/Liderança.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/Nodejs.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/Portugol.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/ReactNative.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/UX.png" alt="livro"></div>


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

        <div class="card">
            <!--1 LINHA-->
            <div class="card__descrição">
                <!--1 COLUNA-->
                <div class="descrição">
                    <h3 class="descrição__titulo">Talvez você também se interesse por...</h3>
                    <h2 class="descrição__titulo-livro">Angular 11 e Firebase</h2>
                    <p class="descrição__texto">Construindo uma apliacação integrada com a plataforma</p>
                </div>
                <!--2 COLUNA-->
                <img src="style/Perfil-escritora 2.png" class="descrição__imagem">
            </div>
            <!--2 LINHA-->
            <div class="card__botões">
                <!--1 coluna-->
                <ul class="botões">
                    <li class="botões__item"><img src="style/Favoritos.png" alt="Favoritar livro"></li>
                    <li class="botões__item"><img src="style/Compras.png" alt="adicionar ao carrinho"><li>
                </ul>
                <!--2 coluna-->
                <a href="#" class="botões__ancora"> Saiba mais</a>
            </div>
        </div>
    </div>
    </section>

    <section class="carrossel">
        <h2 class="carrossel__titulo">Mais Vendidos</h2>
        <div class="swiper">
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
            <!-- Slides -->
                <div class="swiper-slide"><img src="style/Guia Front-end.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/Liderança.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/Nodejs.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/Portugol.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/ReactNative.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/UX.png" alt="livro"></div>


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

        <div class="card">
            <!--1 LINHA-->
            <div class="card__descrição">
                <!--1 COLUNA-->
                <div class="descrição">
                    <img class="estrelinhas" src="style/Estrelinhas.png" alt="estrelinhas">
                    <h3 class="autora">Autora do Mês</h3>
                    <h3 class="nome__autora">Juliana Agaricov</h3>
                    <h2 class="descrição__texto__autora">Analista de sistemas e escritora, Juliana é especialista em Front-End. </h2>
                </div>
                <!--2 COLUNA-->
                <img src="style/Perfil-escritora 1.png" class="descrição__imagem">
            </div>
            <!--2 LINHA-->
            <div class="card__botões">
                <!--1 coluna-->
                <ul class="botões2">
                    <li class="botões__item"><img src="style/Favoritos.png" alt="Favoritar livro"></li>
                    <li class="botões__item"><img src="style/Compras.png" alt="adicionar ao carrinho"><li>
                </ul>

<!--2 coluna-->
                <a href="#" class="botões__ancora"> Saiba mais</a>
            </div>
        </div>
        </div>
    </section>

    <section class="topicos">
        <h2 class="topicos__titulo">TOPICOS VISITADOS RECENTEMENTE</h2>
        <ul class="topicos__lista">
            <li class="topicos__item">
                <a href="#" class="topicos__link">Android</a>
            </li>
            <li class="topicos__item">
                <a href="#" class="topicos__link">Marketing Digital</a>
            </li>
            <li class="topicos__item">
                <a href="#" class="topicos__link">Agile</a>
            </li>
            <li class="topicos__item">
                <a href="#" class="topicos__link">startups</a>
            </li>
            <li class="topicos__item">
                <a href="#" class="topicos__link">HTML e CSS</a>
            </li>
            <li class="topicos__item">
                <a href="#" class="topicos__link">Python</a>
            </li>
            <li class="topicos__item">
                <a href="#" class="topicos__link">OO</a>
            </li>
            <li class="topicos__item">
                <a href="#" class="topicos__link">java</a>
            </li>
        </ul>
    </section>

    <section class="contato">
        <div class="contato__descriçao">
        <h2 class="contato__titulo">Fique por dentro das novidades!</h2>
        <p class="contato__texto">Atualizados de e-books, novos livros, promoções e outros</p>
        </div>
        <input type="email" placeholder="Cadastre seu e-mail" class="contato__email">
    </section>

    <hr />

    <footer class="rodape">
        <h2 class="rodape__titulo">Grupo Alura</h2>
        <ul class="lista-rodape">
            <li class="lista-rodape__titulo">Educação</li>
            <li class="lista-rodape__item">
                <img src="style/CasaDoCodigo.png" alt="Logo da casa do código">
                <a href="#" class="lista-rodape__link">Casa do código</a>
            </li>

            <li class="lista-rodape__item">
                <img src="style/Caelum.png" alt="Logo da caelum">
                <a href="#" class="lista-rodape__link">Caelum</a>
            </li>
        </ul>

        <ul class="lista-rodape">
            <li class="lista-rodape__titulo">Educação Online</li>
            <li class="lista-rodape__item">
                <img src="style/Alura.png" alt="Logo da Alura">
                <a href="#" class="lista-rodape__link">Alura</a>
            </li> 
            <li class="lista-rodape__item">
                <img src="style/AluraEmpresas.png" alt="Logo da Alura empresas">
                <a href="#" class="lista-rodape__link">Alura Para Empresas</a>
            </li> 
            <li class="lista-rodape__item">
                <img src="style/AluraLatam.png" alt="Logo da Alura Latam">
                <a href="#" class="lista-rodape__link">Alura Latam</a>
            </li> 
            <li class="lista-rodape__item">
                <img src="style/AluraStart.png" alt="Logo da Alura Start">
                <a href="#" class="lista-rodape__link">Alura Start</a>
            </li> 
            <li class="lista-rodape__item">
                <img src="style/MusicDot.png" alt="Logo Musicdot">
                <a href="#" class="lista-rodape__link">MusicDot</a>
            </li> 
            <li class="lista-rodape__item">
                <img src="style/AluraLingua.png" alt="Logo da Alura Lingua">
                <a href="#" class="lista-rodape__link">Alura Língua</a>
            </li> 
            <li class="lista-rodape__item">
                <img src="style/PM3.png" alt="Logo PM3">
                <a href="#" class="lista-rodape__link">PM3</a>
            </li> 
        </ul>
        <ul class="lista-rodape">
            <li class="lista-rodape__titulo">Comunidade</li>
            <li class="lista-rodape__item">
                <img src="style/HipstersJobs.png" alt="Logo hipsters Ponto Tech">
                <a href="#" class="lista-rodape__link">Hipsters Ponto Tech</a>
            </li> 
            <li class="lista-rodape__item">
                <img src="style/Scuba.png" alt="Logo da Scuba dev">
                <a href="#" class="lista-rodape__link">Scuba dev</a>
            </li> 
            <li class="lista-rodape__item">
                <img src="style/Layers.png" alt="Logo Layers ponto tech">
                <a href="#" class="lista-rodape__link">Layers Ponto Tech</a>
            </li> 
            <li class="lista-rodape__item">
                <img src="style/LikeABoss.png" alt="Logo Like a boss">
                <a href="#" class="lista-rodape__link">Like a Boss</a>
            </li> 

 <li class="lista-rodape__item">
                <img src="style/CarreiraSemFronteira.png" alt="Logo Carreira sem fronteira">
                <a href="#" class="lista-rodape__link">Carreira Sem Fronteira</a>
            </li> 
            <li class="lista-rodape__item">
                <img src="style/HipstersJobs.png" alt="Logo da hipsters Ponto Jobs">
                <a href="#" class="lista-rodape__link">Hipsters Ponto jobs</a>
            </li> 
            <li class="lista-rodape__item">
                <img src="style/GUJ.png" alt="Logo GUJ">
                <a href="#" class="lista-rodape__link">GUJ</a>
            </li> 
        </ul>


    </footer>

    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
            spaceBetween: 10,
            slidesPerView: 3,
            pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
        });
    </script>
</body>
</html>

.carrossel__titulo{
    color: var(--laranja);
    background-color: var(--branco);
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    padding: 1em 0 0.5 0;
}

.swiper-slide img{
    width: 100%;
}

.swiper-button-prev, .swiper-button-next{
    display: none;
}

.swiper-pagination{
    position: initial;
    margin: 0.5em 0;
}

.card__descrição{
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5em;
}

.card__botões{
    display:flex;
    justify-content: space-between;
}

.botões{
    display: flex;
    padding: 1em 0 0 0;
}

.card{
    background: var(--branco);
    box-shadow: 0px 4px rgba(0, 0, 0 ,0.25);
    border-radius: 10px;
    margin: 1em;
    padding: 1em;
}

.descrição__titulo{
    color: var(--laranja);
    font-weight: 700;
}

.descrição__titulo-livro{
    color: var(--azul);
    font-size: 18px;
    font-weight: 700;
    margin: 0.8em 0;
}

.descrição__texto{
    font-size: 14px;
}

.botões__item{
    margin: 0 0.5em;
}

.botões__ancora {
    display: block;
    width: 146px; /* Defina o tamanho desejado para o botão */
    height: 45px; /* Defina a altura desejada para o botão */
    line-height: 45px; /* Igual à altura do botão para centralizar verticalmente o texto */
    text-align: center;
    text-decoration: none;
    background-color: var(--laranja);
    color: var(--branco);
    font-weight: 700;
}

.estrelinhas{
    color: var(--laranja);
}

.autora{
    color: var(--laranja);
    font-weight: 700;
    margin-top: 0.5em;
}

.nome__autora{
    color: var(--azul);
    font-weight: 700;
    margin-top: 0.8em;
    font-size: 18px;
}

.descrição__texto__autora{
    font-size: 14px;
    text-align: left;
    padding: 1em 0 0 0;
}

.botões2{
    display: flex;
    padding: 1em 0 0 0;
}

@media screen and (min-width: 1024px){
    .carrossel__titulo{
        font-size: 26px;
    }

    .swiper-pagination{
        margin: 2em 0 3em 0;
    }

    .swiper{
        width: 60%;
    }

    .swiper-button-prev,
    .swiper-button-next{
        display: block;
        top: 60%
    }

    .card{
        width: 65%;
        margin: 2em auto;
    }
}

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

    .swiper-pagination{
        margin: 1em 0;
    }

    .swiper-container{
        width: 50%;
    }
}

Olá Gustavo, tudo bem?

Analisando seu código podemos resolver, a questão do header do seguinte modo:

.opçoes{
    display: flex;
    gap: 20px;
}

Essa class deve ser chamada dentro do arquivo header.css. Deste modo o menu de opções ficara alinhado(row), e com espaçamento entre as palavras de 20px.

Para solucionar a questão do card embaixo do carrossel podemos fazer algumas alterações no seu arquivo index.html, essas alterações incluem o fechamento de div carrosel fica do seguinte modo:

Código completo dos carrosséis na próxima resposta

Por fim peço, que no seu arquivo carrossel.css, altere a chamada da função, para validar os campos:

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

    }

    .swiper-pagination{
        margin: 1em 0;
    }

    .swiper{
        width: 50%;
    }
}

Foi alterada o nome da chamada de swiper-container para somente swiper.

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

<section class="carrossel">
        <h2 class="carrossel__titulo">Novos lançamentos</h2>
        <!-- Slider main container -->
        <div class="carrossel__container">
            <div class="swiper">
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide"><img src="style/Guia Front-end.png" alt="livro"></div>
                    <div class="swiper-slide"><img src="style/Liderança.png" alt="livro"></div>
                    <div class="swiper-slide"><img src="style/Nodejs.png" alt="livro"></div>
                    <div class="swiper-slide"><img src="style/Portugol.png" alt="livro"></div>
                    <div class="swiper-slide"><img src="style/ReactNative.png" alt="livro"></div>
                    <div class="swiper-slide"><img src="style/UX.png" alt="livro"></div>
                </div>

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


            <div class="card">
                <!--1 LINHA-->
                <div class="card__descrição">
                    <!--1 COLUNA-->
                    <div class="descrição">
                        <h3 class="descrição__titulo">Talvez você também se interesse por...</h3>
                        <h2 class="descrição__titulo-livro">Angular 11 e Firebase</h2>
                        <p class="descrição__texto">Construindo uma apliacação integrada com a plataforma</p>
                    </div>
                    <!--2 COLUNA-->
                    <img src="style/Perfil-escritora 2.png" class="descrição__imagem">
                </div>
                <!--2 LINHA-->
                <div class="card__botões">
                    <!--1 coluna-->
                    <ul class="botões">
                        <li class="botões__item"><img src="style/Favoritos.png" alt="Favoritar livro"></li>
                        <li class="botões__item"><img src="style/Compras.png" alt="adicionar ao carrinho">
                        <li>
                    </ul>
                    <!--2 coluna-->
                    <a href="#" class="botões__ancora"> Saiba mais</a>
                </div>
            </div>

        </div>

    </section>

    <section class="carrossel">
        <h2 class="carrossel__titulo">Mais Vendidos</h2>
        <div class="carrossel__container">
        <div class="swiper">
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"><img src="style/Guia Front-end.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/Liderança.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/Nodejs.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/Portugol.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/ReactNative.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/UX.png" alt="livro"></div>
            </div>

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

        <div class="card">
            <!--1 LINHA-->
            <div class="card__descrição">
                <!--1 COLUNA-->
                <div class="descrição">
                    <img class="estrelinhas" src="style/Estrelinhas.png" alt="estrelinhas">
                    <h3 class="autora">Autora do Mês</h3>
                    <h3 class="nome__autora">Juliana Agaricov</h3>
                    <h2 class="descrição__texto__autora">Analista de sistemas e escritora, Juliana é especialista em
                        Front-End. </h2>
                </div>
                <!--2 COLUNA-->
                <img src="style/Perfil-escritora 1.png" class="descrição__imagem">
            </div>
            <!--2 LINHA-->
            <div class="card__botões">
                <!--1 coluna-->
                <ul class="botões2">
                    <li class="botões__item"><img src="style/Favoritos.png" alt="Favoritar livro"></li>
                    <li class="botões__item"><img src="style/Compras.png" alt="adicionar ao carrinho">
                    <li>
                </ul>
                <!--2 coluna-->
                <a href="#" class="botões__ancora"> Saiba mais</a>
            </div>
        </div>
    </div>

    </section>

funcionou, obrigado novamente victor.

Cara estou com outro problema q não estou conseguindo resolver.

A parte do contato, a imagem da carta que fica na barra de pesquisa não aparece, e tb o background não está do mesmo tamanho do que no vídeo. Tentei usar o background-size mas não funcionou.

.contato{
    background-color: var(--branco);
    padding: 1em;
}

.contato__titulo,
.contato__texto{
    background: var(--azul-degrade);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contato__titulo{
    font-size: 18px;
    font-weight: 500;
}

.contato__texto{
    font-weight: 300;
    margin: 1em 0;
}

.contato__email{
    padding: 1em;
    border: 1px solid var(--azul);
    border-radius: 24px;
    width: 90%;
    color: var(--azul);
}

.contato__email::placeholder{
    font-family: var(--fonte-principal);
    color: var(--azul);
    background: url("../style/Vector.png");
    padding-left: 2em;
    text-align: start;
}

@media screen and (min-width: 1024px){
    .contato{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .contato__titulo{
        font-size: 24px;
    }

    .contato__descriçao{
        margin-right: 1em;
        width: 30%;
    }

    .contato__email{
        width: 30%;
    }
}

@media screen and (min-width: 1728){
    .contato{
        padding: 3em 20vw;
    }
}

Olá Gustavo!

Para solucionar a questão do pleceholder podemos passar os seguintes atributos, dentro da class .contato__email::placeholder, que fica dentro do arquivo contato.css:

.contato__email::placeholder{
    font-family: var(--fonte-principal);
    color: var(--azul);
    background: url("../style/Vector.png") no-repeat;
    padding-left: 2em;
    text-align: start;
    align-items: center;
}

Foi adicionado o valor no repeat e ajuste no tamanho e no alinamento do código.

Peço que baixe novamente a imagem correta e coloque na pasta style e passe o endereço correto da mesma, em background:url, para lhe auxiliar deixo a imagem que pode ser baixada ou copiada o link:

Quanto ao Banner ele está diferente por conta do tamanho da fonte, o seu está semelhante as class utilizadas na aula mas ela dornece resultados diferentes e não altera as propriedades como o esperado, pode ter nomeação de class diferente em seu código que está interferindo em outros componente, peço que revise as class ensinadas em aulas e as que foram aplicadas em seu código, para não haver muita confusão em uso de class. Mas no arquivo html para aumentar o tamanho do banner você pode alterar o font-size para 40px, essa class fica na banner.css

.banner__titulo {
    font-size: 40px;
    font-weight: 700;
}

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!