Bom dia! Estou criando uma landing page de uma escola de música como treino. Adicionei o conteúdo central separando pela tag section e assumiu o espaçamento demonstrado na foto. Porém ao adicionar a tag âncora, utilizando a div, o espaçamento mudou. Portanto, desejo saber o motivo!

Abaixo a linha de código do html e css

<main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Bem vindo a Escola de Artes do Colégio Adventista de Montes Claros</h1>
            <h2 class="apresentacao__conteudo__subtitulo">Somos uma comunidade apaixonada pela expressão criativa. Oferecemos cursos e programas de alta qualidade para artistas em ascensão. Junte-se a nós e explore seu potencial artístico!</h2>
            <p class="apresentacao__conteudo__texto">Oferecemos aulas de 15 instrumentos diferentes. Todos profissionais graduados e capacitados </p>
        </section>  
        <div>
            <h3>Acesse nossa rede e nosso contato:</h3>
            <a href="">Instgram</a>
            <a href="">WhatsApp</a>
        </div>      
    </main>
    
    
    *{
    margin:0;
    padding: 0;
}

body{
    box-sizing: border-box;
    background-color: #BEADFA;
    color: #FFF8C9;
}

.apresentacao{
    padding: 15% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    gap: 50px;
}

.apresentacao__conteudo{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.apresentacao__conteudo__titulo{
    padding: 0 0 0 10%;
}

.apresentacao__conteudo__texto{
    padding: 0 0 0 8%;
    font-size: 20px;
}