Oi Bruno, tudo bem?

O justify-content: space-between; do Flexbox funciona distribuindo o espaço restante igualmente entre os elementos. No seu caso, você tem dois elementos filhos dentro do seu elemento pai com a classe .apresentacao, então o space-between irá colocar o máximo de espaço possível entre esses dois elementos.

Quando você disse que alterou de % para px e deu certo, acredito que você esteja se referindo à propriedade margin. A diferença entre usar % e px é que % é relativo ao elemento pai, enquanto px é um valor fixo.

Por exemplo, se você tem um elemento pai com 500px de largura e você coloca margin: 10%; em um elemento filho, essa margem será de 50px (10% de 500px). Se você redimensionar a janela do navegador e o elemento pai se tornar 700px de largura, a margem agora será de 70px.

Por outro lado, se você usar margin: 50px;, essa margem será sempre de 50px, não importa o tamanho do elemento pai.

No seu caso, quando você usou uma margem em %, o espaço entre os elementos estava mudando de acordo com o tamanho do elemento pai (a janela do navegador, neste caso). Quando você mudou para px, o espaço entre os elementos se tornou fixo, o que pode ter resolvido o seu problema.

Um abraço e bons estudos.