Projeto final diferente.

Olá, Maurício! Tudo bem?

Isso pode estar relacionado ao uso do flex-grow e ao max-width que você aplicou nos itens de eventos e agenda.

Para ajustar o layout em resoluções maiores, você pode tentar o seguinte:

1. Ajustar o max-width: Verifique se o max-width dos itens está adequado para a resolução maior. Talvez seja necessário aumentar esse valor para que os itens se distribuam melhor na tela.

2. Adicionar Media Queries:

   • Você pode adicionar uma media query específica para a resolução de 1920px para ajustar o layout conforme necessário.

   • Por exemplo:

     @media (min-width: 1920px) {
       .eventos__item, .agenda__item {
         max-width: 500px; /* Ajuste conforme necessário */
       }
     }
     

3. Verificar o justify-content: Certifique-se de que o justify-content está configurado corretamente para centralizar ou distribuir os itens conforme desejado.

4. Testar com flex-basis: Em vez de depender apenas do flex-grow, você pode experimentar usar flex-basis para definir uma largura base para os itens:

   .eventos__item, .agenda__item {
     flex-basis: 30%; /* Ajuste conforme necessário */
   }
   

Essas são algumas sugestões para ajustar o layout. Teste e veja se ajuda a resolver o problema na resolução maior.

Caso ainda tenha problemas, recomendo que compartilhe seu projeto completo com a gente através do link do GitHub para que seja possível testá-lo com mais precisão, pois outros arquivos podem estar interferindo na exibição em diferentes resoluções.

Se precisar, temos um tutorial de como subir seu projeto no GitHub no Guia de como fazer uma boa pergunta no fórum.

Conte com o apoio do fórum. Espero ter ajudado e bons estudos!

Não consegui resolver. Me ajudem por favor, meu projeto: https://github.com/bronstein11/culturama.js

Oi, Maurício!

Sobre sua última dúvida: o comportamento estranho dos cards de eventos e agenda em resoluções como 1920x1080 ocorre porque o flex-wrap permite quebra de linha, mas os elementos internos (especialmente os cards e o botão "Ver mais") não estão organizados para respeitar essa quebra de maneira clara. Isso faz com que o botão acabe ficando ao lado dos cards, quando o esperado seria ele aparecer abaixo, ocupando uma nova linha inteira.

Para resolver isso, vamos aplicar o seguinte:

• O botão “Ver mais” agora ocupa toda a largura da linha com flex-basis: 100%, forçando ele a se posicionar abaixo dos cards.
• O layout dos cards continua usando flex-wrap, mas agora com align-items: flex-start para evitar desalinhamento vertical.

Veja como ficou o CSS corrigido (arquivo flex.css):

/* Cabeçalho */

.menu {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 33px;
}

/* Destaques */

.destaques {
  display: flex;
  align-items: center;
  gap: 10px;
}

.destaques__barra {
  flex-grow: 1;
}

/* Eventos */


/* Alteração: layout flex para lista de eventos */
.eventos__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  justify-content: center;
  align-items: flex-start;
}

/* Alteração: botão 'Ver mais' ocupa linha inteira abaixo dos cards de eventos */
.eventos__botao {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  margin-top: 1.5em;
}

.eventos__item {
  flex-grow: 1;
  max-width: 400px;
}

/* Alteração: botão 'Ver mais' ocupa linha inteira abaixo dos cards de agenda */
.agenda__botao {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  margin-top: 1.5em;
}

/* Agenda */

.agenda__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  justify-content: center;
}

.agenda__item {
  flex-grow: 1;
  max-width: 400px;
}

/* Categorias */

.categorias__lista {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/* Rodapé */

.rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.rodape__logo {
  align-self: flex-end;
}

@media (min-width: 720px) {
  /* Cabeçalho */

  .menu {
    column-gap: 75px;
  }

  /* Categorias */

  .categorias__lista {
    flex-wrap: wrap;
    row-gap: 1em;
    column-gap: 1.5em;
  }

  /* Eventos */

  .eventos__lista {
    justify-content: end;
  }

  /* Agenda */

  .agenda__lista {
    justify-content: end;
  }
}

@media (min-width: 1440px) {
  /* Cabeçalho */

  .menu {
    column-gap: 105px;
    flex-wrap: nowrap;
  }

  .menu__item:nth-child(1) {
    order: 1;
  }

  .menu__item:nth-child(2) {
    order: 3;
  }

  .menu__item:nth-child(3) {
    order: 4;
  }

  .menu__item:nth-child(4) {
    order: 5;
  }
  .menu__item:nth-child(5) {
    order: 2;
  }
}

Com essa estrutura, o layout se adapta de forma mais previsível em telas grandes, mantendo a responsividade e o alinhamento visual adequado.

Fico à disposição. Abraços e bons estudos!