dando vida ao projeto

<h2 class="text-center">Busque por categoria:</h2> <div class="container row mx-auto g-4"> <div class="col-6 col-md-4 col-xxl-2"> <div> <div class="card"> <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"> <title>Placeholder</title> <rect width="100%" height="100%" fill="#868e96"></rect> <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text> </svg> <div class="card-header bg-black text-bg-dark"> <p class="text-center card-text"> Categoria </p> </div> </div> </div> <section class="pb-4 bg-black text-bg-dark"> <h2 class="text-center py-3">Conheça todas as nossas facilidades</h2> <div class="d-flex flex-column flex-lg-row align-items-center justify-content-center gap-3 px-3"> <div class="divs-facilidades d-flex align-items-center"> <div><i class="verde-limao bi bi-x-diamond fs-1"></i></div> <div> <div class="ms-3 mb-1 verde-limao">PAGUE PELO PIX</div> <div class="texto-menor ms-3">Ganhe 5% OFF em pagamentos via PIX</div> </div> </div> <div class="divs-facilidades d-flex "> <div><i class="verde-limao bi bi-arrow-repeat fs-1"></i></div> <div> <div class="ms-3 mb-1 verde-limao">TROCA GRÁTIS</div> <div class="texto-menor ms-3">Fique livre para trocar em até 30 dias.</div> </div> </div> <div class="divs-facilidades d-flex "> <div><i class="verde-limao bi bi-flower1 fs-1"></i></div> <div> <div class="ms-3 mb-1 verde-limao">SUSTENTABILIDADE</div> <div class="texto-menor ms-3">Moda responsável, que respeita o meio ambiente.</div> </div> </div> </div> </section> <footer class="text-center bg-black text-bg-dark"> <p class="card-text py-3">2023 <i class="bi bi-c-circle"></i> Desenvolvido por Alura | Projeto fictício sem fins comerciais.</p> </footer> <h2 class="text-center">Produtos que estão bombando!</h2> <div class="container row mx-auto"> <div class="col-12 col-md-6 col-xxl-4 pb-4"> <div class="card"> <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"> <title>Placeholder</title> <rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text> </svg> <div class="card-body"> <h5 class="card-title">Produto</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <p>R$30,00</p> <a href="#" class="btn btn-primary botao-lilas rounded-0 border-0">Ver mais</a> </div> </div> </div>

Oi, Estanislau! Como vai?

O problema pode estar nesse ponto: seu HTML ficou desbalanceado (div/section/footer fora de ordem). Quando você abre container row e não fecha antes do section/footer, o Bootstrap entende que o resto ainda esta dentro da grade e o layout quebra.

Siga esses passos para resolver:

Feche a grade da categoria antes de abrir outras seções.
Separe cada bloco em um container + row.
Em "Produtos", use row g-4 e colunas col-12 col-md-6 (2 cards lado a lado no desktop).

Ajuste seu código assim:

<!-- CATEGORIAS -->
<h2 class="text-center">Busque por categoria:</h2>

<div class="container">
  <div class="row mx-auto g-4">

    <div class="col-6 col-md-4 col-xxl-2">
      <div class="card">
        <!-- imagem -->
        <div class="card-header bg-black text-bg-dark">
          <p class="text-center card-text mb-0">Categoria</p>
        </div>
      </div>
    </div>

    <!-- repita outras colunas -->

  </div>
</div>

<!-- PRODUTOS -->
<h2 class="text-center my-4">Produtos que estao bombando!</h2>

<div class="container">
  <div class="row mx-auto g-4">

    <div class="col-12 col-md-6 pb-4">
      <div class="card">
        <!-- imagem -->
        <div class="card-body">
          <h5 class="card-title">Produto</h5>
          <p class="card-text">Descricao do produto.</p>
          <p class="mb-3">R$30,00</p>
          <a href="#" class="btn botao-lilas rounded-0 border-0">Ver mais</a>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-6 pb-4">
      <div class="card"><!-- segundo card --></div>
    </div>

  </div>
</div>

<!-- FACILIDADES -->
<section class="pb-4 bg-black text-bg-dark">
  <h2 class="text-center py-3">Conheca todas as nossas facilidades</h2>

  <div class="d-flex flex-column flex-lg-row align-items-center justify-content-center gap-3 px-3">

    <div class="divs-facilidades d-flex align-items-center">
      <div><i class="verde-limao bi bi-x-diamond fs-1"></i></div>
      <div>
        <div class="ms-3 mb-1 verde-limao">PAGUE PELO PIX</div>
        <div class="texto-menor ms-3">Ganhe 5% OFF em pagamentos via PIX</div>
      </div>
    </div>

    <!-- outras facilidades -->

  </div>
</section>

<footer class="text-center bg-black text-bg-dark">
  <p class="card-text py-3 mb-0">2023 <i class="bi bi-c-circle"></i> Desenvolvido por Alura | Projeto ficticio.</p>
</footer>

CSS para não estourar no mobile:

.texto-menor{ font-size: 13px; }

.divs-facilidades{
  max-width: 325px;
  width: 100%;
}

.botao-lilas{
  background-color: #9353FF;
  color: #fff;
}

.verde-limao{ color: #DAFF01; }

O que o código faz: organiza as seções (categoria/produtos/facilidades) com divs fechadas no lugar certo e monta a grade dos produtos em 2 colunas no desktop.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Tópicos relacionados

Conteúdos Alura com o tema