Problema no espaçamento entre os botões e zoom da página | HTML e CSS: Classes, posicionamento e Flexbox

Boa tarde, estou tendo dois probleminhas com meu projeto... o primeiro é que os dois botões estão grudados quando utilizo justify-content: space-between; no container .apresentacao__links (como fizeram na aula), pedi ajuda a Luri e ela me disse para colocar um gap no lugar, se essa for a única solução, gostaria apenas de saber o porquê a propriedade justify não estar dando certo no meu caso.
O segundo problema, é que se eu diminuo o zoom da página (inferior ao padrão de 100%) a imagem da moça começa a se deslocar para a direita se distanciando do texto, não sei se foi algo que fiz errado no html ou CSS (ou nos dois), ou será um tópico abordado em outro curso da formação, mas de todo caso deixo registrado aqui se alguém puder me ajudar a entender rsrs.
Insira aqui a descrição dessa imagem para ajudar na acessibilidade
Agradeço à qualquer ajuda/ dica que puderem me dar. :D

 !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>Portfólio Thainá</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
      
    </header> <!--Cabeçalho da página-->
    <main class="apresentacao">
        <section class="apresentacao__conteudo"> <!--Padrão nome elemento filho-->
            <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  React, HTML e CSS.
                Ajudo pequenos negócios e designers a colocarem em prática boas ideias. 
                Vamos conversar?</p>
            <div class="apresentacao__links">
                <a class="apresentacao__links__link" href="https://instagram.com/rafaballerini">Instagram</a>
                <a class="apresentacao__links__link" href="https://github.com/guilhermeonrails">GitHub</a>
            </div>
             </section>
            <img src="Imagem.png" alt="Foto da Joana Santos programando">
    </main> <!--Conteúdo principal meio da página-->
    <footer>
        
    </footer> <!--Rodapé da página-->
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;1,600&display=swap');
*{
    margin: 0;
    padding: 0;
}
body {
    height: 100vh;
    box-sizing: border-box;
    background-color: black;
    color:#F6F6F6;
}

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

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

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

.apresentacao__conteudo__titulo{
    font-size: 36px;
    font-family: "Krona One", sans-serif;
}

.apresentacao__conteudo__texto{
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
}

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

.apresentacao__links__link{ 
    background-color: #22D4FD;
    width: 280px;
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    padding: 21.5px 0;
    text-decoration: none;
    color: black;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

Olá, Thainá, como vai?

Sobre o espaçamento entre os botões: testei seu código e o comportamento estava normal aqui, com os botões espaçados corretamente. Isso pode variar de acordo com o tamanho do seu monitor ou da janela do navegador, pois essa propriedade distribui os elementos nas extremidades do container. Se a soma da largura dos botões se aproxima da largura do container, eles acabam ficando colados.

Por isso, usar a propriedade gap pode ser uma alternativa mais consistente, já que ela define um espaço fixo entre os itens, independentemente da largura total.

Sobre a imagem se deslocando ao diminuir o zoom da página: esse comportamento acontece porque o justify-content: space-between está distribuindo o máximo possível de espaço entre o texto e a imagem. Ao reduzir o zoom, esse espaço aumenta. Uma forma de limitar esse afastamento é definir uma largura máxima com max-width, por exemplo:

.apresentacao {
    margin: 10% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px; /* Ajuste conforme achar melhor */
}

Esse tipo de ajuste é melhor aplicado com base em media queries, que permitem adaptar o layout para diferentes tamanhos de tela. Como esse conteúdo será abordado com mais profundidade em cursos futuros, vale aguardar esse momento para aplicar essas soluções de forma mais estruturada.

Espero ter ajudado.

Siga firme nos seus estudos e conte com o fórum sempre que precisar.

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado