padding n esta aproximando ao header

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Hammersmith+One&display=swap');

• { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; margin: 0; display: flex; flex-direction: column; }

body { height: 100%; background-color: #fff8f3; color: #261c72; }

.titulo { color: #2b68a5; font-size: 36px; }

.cabecalho{ padding: 2% 0 0 12%; }

.cabecalho__menu{ display: flex; gap: 40px;

}

.cabecalho__menu__link{ font-family: "Hammersmith One" sans-serif; font-size: 18px; font-weight: 600;

}

.apresentacao { padding: 2% 12%; display: flex; align-items: center; justify-content: space-between; flex-grow: 1; }

.apresentacao__conteudo { width: 615px; display: flex; flex-direction: column; }

.apresentacao__conteudo__titulo { font-size: 36px; font-family: "Anton", sans-serif; line-height: 1.1; margin-top: 0;

}

.apresentacao__conteudo__texto { color: #1F3F6F; font-size: 18px; font-family: "Hammersmith One", sans-serif; margin-top: 0;

}

.apresentacao__links { display: flex; gap: 10px; flex-direction: column; height: 100px; }

.apresentacao__links__subtitulo { font-family: "Anton", sans-serif; font-weight: 300; font-size: 24px; margin-bottom: -2%; }

.imagem__github { margin-left: -24px; }

.apresentacao__links__link { display: flex; justify-content: center; align-items: flex-end; gap: 8px; border: 2px solid #2b68a5; width: 200px; text-align: center; border-radius: 24px; font-size: 1rem; padding: 10px 0; text-decoration: none; color: #1F3F6F; font-family: "Hammersmith One", sans-serif; font-weight: 600; margin-top: 5.75px; box-shadow: 0 0.4rem #dfd9d9; }

.apresentacao__links__link:hover { background-color: #efcfb8; box-shadow: 0 0.2rem #dfd9d9; text-shadow: 0 0.1rem #bcb4b4;

}

.apresentacao__imagem {

width: 100%;
height: 100%;
object-fit: cover;
margin-left: 20px;

}

.imagem__assets { width: 20px; height: 20px; }

.rodape{ text-align: center; padding: 10px; background-color: #efcfb8; color: #2b68a5; font-family: "Anton" sans-serif; font-size: 18px;

}

Oii, Alexsander. Tudo bem?

Peço que você compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar.

Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

Um abraço e bons estudos.

https://github.com/AlexsanderSRJ/primeiroprojetopessoal

boa tarde, desculpe a demora a responder, estive ocupado com a faculdade

Oii, Alexsander!

O problema para o texto não estar subindo é a propriedade align-items: center; que foi adicionada à classe .apresentacao. O que acontece é que esta propriedade, quando utilizada com o flex-direction padrão de row, alinha os itens internamente no centro vertical da página, portanto, qualquer padding adicionado ali não terá efeito.

Pra que você consiga manipular a a posição do texto em relação ao header, é necessário eliminar esta propriedade e ajustar o padding como desejar. Por exemplo:

.apresentacao {
    padding: 5% 12%; // padding vertical alterado para 5%
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    flex-grow: 1;
}

E, o comportamento padrão de uma flexbox com imagens é esticar a imagem para que ela caiba no container definido. Portanto, é necessário também definir um tamanho fixo para a imagem da apresentação. Por exemplo:

.apresentacao__imagem {
    width: 350px; // tamanho fixo definido em pixels
    /* height: 100%; - eliminamos a altura para que ela seja calculada automaticamente à partir da largura */
    object-fit: cover;
    margin-left: 20px;
}

Desta maneira, é possível manipular com mais liberdade o posicionamento dos elementos da sua apresentação em relação ao header.

Espero ter ajudado.

Um abraço e bons estudos.