Olá, Leonardo, tudo bem?
Quando você utiliza a propriedade justify-content: space-between;
em um container com display: flex;
, o que acontece é que o espaço restante no container é distribuído igualmente entre os elementos. Ou seja, se você tem dois elementos, cada um ocupando 50% do espaço do container, não haverá espaço restante para ser distribuído, e portanto, a propriedade space-between
não terá efeito visível.
Agora, quando você mencionou sobre passar o valor de 100% (por exemplo a section com 55% e a img com 55%), isso pode causar um overflow, ou seja, seus elementos vão ultrapassar o tamanho do container em resumo vão estourar e vai "vazar" o conteúdo dentro da box. Isso pode não é muito legal geralmente, pois pode causar problemas de layout e responsividade.
No entanto, se você deseja manter um espaço entre os elementos mesmo quando eles ocupam 100% do container, você pode utilizar a propriedade gap
. O gap
cria um espaço entre as linhas/colunas em um container flex ou grid.
Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!