[Projeto] Como ajustar os elementos para que não escapem de uma área da página?

Você pode usar a propriedade "word-break" no css, ele faz com que as palavras sejam "quebradas" e não "saiam" da tela

Existem algumas larguras ficas em seu CSS, width, padding, Isso pode fazer com que as imagens ou outros elementos não se ajustem corretamente nas telas menores. Utiliza Media Queries para Ajustes.

@media (max-width: 768px) { .cabecalho { padding: 32px 16px; } .apresentacao { padding: 32px 16px; } .sobre-mim { padding: 32px 16px; } .apresentacao__foto { width: 100%; } }

Problema de elementos sendo "espremidos" em telas menores

.projetos_web { display: flex; flex-wrap: wrap; /* Permite quebrar os itens quando não cabem */ justify-content: center; align-items: center; gap: 16px; }

.projetos__conteiner { flex: 1 1 320px; /* Cada item vai ocupar o mínimo possível e crescer até 320px */ display: flex; flex-direction: column; gap: 8px; }

Responsividade da seção "Projetos"

.projetos__conteiner { width: 100%; /* Garante que o conteúdo ocupe 100% da largura disponível / display: flex; flex-direction: column; gap: 8px; flex-grow: 1; / Faz com que o conteúdo cresça de forma proporcional */ max-width: 100%; }

.projetos_web { display: flex; flex-wrap: wrap; /* Permite que os elementos quebrem em telas menores */ justify-content: space-between; gap: 16px; }

Obrigada pela ajuda. Deu certo!