Alinhamento | HTML e CSS: cabeçalho, footer e variáveis CSS

Não consigo alinhar meu projeto, ja vi e revi e não consigo identificar onde estou errando;

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root{
    --cor-primaria: #2C3639;
    --cor-secundia: #DCD7C9;
    --cor-terciaria: #A27B5C;
    --cor-hover: #3F4E4F;
    --font-primaria: 'Krona One', sans-serif;
    --font-secundaria: 'Montserrat', serif;
}

*{
    margin: 0;
    padding: 0;
}

body{
    box-sizing: border-box;
    background-color: var(--cor-primaria);
    color: var(--cor-secundia);
   
}

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

.cabecalho__menu{
    display: flex;
    gap: 80px;
}

.cabecalho__menu__link{
    font-family: var(--font-secundaria);
    font-size: 24px;
    font-weight: 600;
    color: var(--cor-terciaria);
    text-decoration: none;
}

.apresentacao{
    padding: 10% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;    
}

.apresetacao__conteudo{    
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;    
}

.apresetacao__conteudo__titulo{
    font-size: 36px;
    font-family: var(--font-primaria);
}

.titulo-destaque{
    color: var(--cor-terciaria);
}

.apresetacao_conteudo__texto{
    font-size: 24px;
    font-family: var(--font-secundaria);
}

.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;    
    gap: 32px;
}
.apresentacao__links_subtitulo{
    font-family: var(--font-primaria);
    font-weight: 400;
    font-size: 24px;    
}

.apresentacao__links__link{
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 1px solid var(--cor-terciaria);
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-weight: 600;
    font-size: 24px;
    padding: 15.5px 0px;
    text-decoration: none;
    color: var(--cor-secundia);
    font-family: var(--font-secundaria);
}
.apresentacao__links__link:hover {
    background-color: var(--cor-hover);
}

.rodape{
    padding: 24px;
    color: var(--cor-primaria);
    background-color: var(--cor-terciaria);
    text-align: center;
    font-family: var(--font-secundaria);
    font-size: 24px;
    font-weight: 400;
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre mim</title>
    <link rel="stylesheet" href="/stiloscss/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="/stiloscss/index.html">Home</a>
            <a class="cabecalho__menu__link" href="/stiloscss/about.html">Sobre mim</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresetacao__conteudo__titulo">Sobre Mim</h1>
            <p class="apresetacao__conteudo__texto">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae consequuntur sint molestiae doloremque, mollitia asperiores commodi fugit molestias illo dolores, maiores vero, sapiente veniam? Animi corrupti quaerat officia! Nostrum, veritatis.</p>
            
            <p class="apresetacao__conteudo__texto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto nesciunt, aspernatur sed placeat quod perspiciatis asperiores eligendi, recusandae illo est culpa, officiis doloribus maiores? Libero distinctio ut quasi nisi cupiditate.
            Architecto saepe tempore nesciunt, autem distinctio ab repellendus voluptatum tempora? Perspiciatis voluptatem error quo! Nam maiores eveniet explicabo neque ullam ipsum provident, placeat quam, distinctio pariatur, corrupti amet perferendis eos.</p>
        </section>
    </main>
    <img src="/pictures/Imagem (1).png" alt="Run Forest">
    
    <footer class="rodape">
        <p>
            Desenvolvido por mim mesmo!
        </p>
    </footer>
</body>
</html>