problema entre de espaçamento entre os 2 botões.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

veja, na imagem a cima os 2 botoes estao juntos quando vc reduz a tela (meu monitor é wide entao uso 2 browser um do lado do outro) em tela cheia fica ok, mas quando reduzo o tamanho da tela os botões se juntam.

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

resolvi adicionar a propriedade margin e colocar o valor de 1%, bom isso resolveu o problema como na imagem a baixo.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

a dúvida é: essa é uma solução aceitavel? quando eu clico em "maximizar" a tela no browser, em um prirmeiro momento, parece funcionar ok.

.apresentacao__links__link {
    margin: 1%;
    background-color: #22d4fd;
    width: 280px;
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0px;
    text-decoration: none;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
}

adicionei o margin direto no elemento filho da div.

<!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>Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <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"> 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://www.instagram.com/despatrickster/">Instagram</a>
        <a class="apresentacao__links__link" href="https://github.com/zwtar">GitHub</a>
        </section>
        <img src="Imagem.png" alt="Foto da joana santos programando">
        </div>
    </main>
    <footer></footer>
</body>
</html>

Olá, Francisco!

Obrigado por compartilhar sua dúvida conosco. Fico feliz em ajudar!

A solução que você encontrou, adicionando a propriedade margin com o valor de 1%, parece ser uma forma aceitável de resolver o problema de espaçamento entre os botões. No entanto, é importante lembrar que o valor de 1% pode variar dependendo do tamanho da tela e do conteúdo ao redor dos botões, nesse caso você pode utilizar uma propriedade fixa como "px".

Uma alternativa que você pode considerar é utilizar a propriedade gap na tag pai dos links que no curso é a da classe ".apresentacao__links" com um valor fixo em "px", fazendo isso adiciona uma espaço entre as tags filhas, no caso os botões, você pode utilizar um gap: 32px;(testa outros valores) lembrando que para utilizar o gap, a tag precisa estar com o display flex, ai você pode apagar a margin de 1% dos links. Por exemplo:

CSS

.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

Essa abordagem garante que os botões sempre terão um espaçamento definido, independentemente do tamanho da tela ou do conteúdo ao redor.

Lembre-se de testar essa solução em diferentes dispositivos e tamanhos de tela para garantir que o espaçamento entre os botões fique adequado em todas as situações.

Espero ter ajudado e bons estudos!