O texto do footer fica ao lado esquerdo dos botões de link ao invés de aparecer na parte inferior da página web. | HTML e CSS: cabeçalho, footer e variáveis CSS

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portifolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="corpo">
    <header></header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class ="apresentacao__conteudo__titulo">
                Eleve seu negócio digital a outro nível 
                <strong class="titulo-destaque">
                    com um Front-end de qualidade!
                </strong>
            </h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Joana Santos, desenvolvedora 
                Front-end com especialidade em <strong id="stacks">React, HTML e
                CSS</strong>. Ajudo pequenos negócios e designers a 
                colocarem em prática boas ideias. Vamos 
                conversar?
            </p>    
            <div class="apresentacao__conteudo__links">
                <h2 class="apresentacao__conteudo__links__subtitulo">Acesse minhas redes:</h2>

                <a class="apresentacao__conteudo__links__link" href="htt    ps://github.com/guilhermeonrails" target="_blank">
                    <img src="./assets/github.png" alt="Âncora para o GitHub"> 
                    GitHub
                </a>
                <a class="apresentacao__conteudo__links__link" href="https://www.linkedin.com/in/rafaellaballerini/" target="_blank">
                    <img src="./assets/linkedin.png" alt="Âncora para o LinkedIn"> LinkedIn
                </a>
                <a class="apresentacao__conteudo__links__link" href="https://www.twitch.tv/rafaballerinii" target="_blank">
                    <img src="./assets/twitch.png" alt="âncora para o Twitch"> Twitch
                </a>
            </div>
        </section>
        <img src="./assets/Imagem.png" alt="Foto da Joana Santos programando">   
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Alura.</p>
    </footer>
</body>
</html>

O CSS:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

*
{
    margin: 0;
    padding: 0;
}


body{
    height: 100vh;
    box-sizing: border-box;
    background-color: #000000;
    color: #F6F6F6;
}

.titulo-destaque{
    color: #22D4FD;
}

.apresentacao
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 10% 20%;
    column-gap: 82px;

}

.apresentacao__conteudo__links__link
{   
    width: 378px;
    height: 68px;
    background-color: #000000;
    border-radius: 8px;
    border: 2px solid #22D4FD;
    color: #F6F6F6;
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    font-style: normal;
    padding: 21.5px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 16px;
    transition: 1s;
    cursor: pointer;
}

.apresentacao__conteudo__links__link:hover
{
    background-color: #272727;
    transition: 1s;
}

.apresentacao__conteudo__links__subtitulo
{
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
    font-size: 24px;
    width: 351px;
    height: 40px;
}

.apresentacao__conteudo
{
    width: 615px;
    height: 482px;
    display: flex;
    flex-direction: column;
    row-gap: 40px;
}

.apresentacao__conteudo__titulo
{
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
    transition: 1s;
}

.apresentacao__conteudo__titulo:hover
{
    font-size: 37px;
    transition: 1s;
    cursor: pointer;
}

.apresentacao__conteudo__texto
{
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    transition: 1s;
}

.apresentacao__conteudo__texto:hover
{
    font-size: 25px;
    transition: 1s;
    cursor: pointer;
}
.apresentacao__conteudo__links
{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 32px;
    width: 381px;
    height: 262px;

}

.rodape
{

}

Foto da página web Portfolio com erro de exibição da posição correta do footer Sei que já existem alguns tópicos resolvidos neste fórum, que tratam este problema, mas nenhum deles serviu para o meu projeto.

Para fazer o texto no rodapé aparecer no lado esquerdo dos botões de link, você pode usar a exibição da propriedade CSS e defini-la como bloco inline para o texto e o contêiner de links. Em seguida, adicione uma propriedade vertical-align para alinhar os elementos verticalmente.

Aqui está o CSS atualizado para os seletores .rodape e .apresentacao__conteudo__links:

Você pode ajustar o valor da margem do seletor .rodape para alterar a distância entre o texto do rodapé e os botões de link.

.rodape {
  display: inline-block;
  vertical-align: middle;
  margin: 20px 0;
}

.apresentacao__conteudo__links {
  display: inline-block;
  vertical-align: middle;
}

Se não der certo retorne com o resultado printado por gentileza

Mergulhe em programação