Tentei as soluções apresentadas aqui mas nenhumas delas funcionou, quando alternei de % pra px deu certo. Alguem sabe pq?
.apresentacao { margin: 100px; display: flex; align-items: center; justify-content: space-between; }
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Tentei as soluções apresentadas aqui mas nenhumas delas funcionou, quando alternei de % pra px deu certo. Alguem sabe pq?
.apresentacao { margin: 100px; display: flex; align-items: center; justify-content: space-between; }
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.