Flex box justify-content:space-between;

Oi, Rodrigo! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

O objetivo é manter texto à esquerda e imagem à direita dentro do mesmo contêiner. Para isso, use display: flex com justify-content: space-between e defina larguras máximas para evitar que o texto empurre a imagem. Além disso, percebi que os itens ficaram presos no topo. Para centralizar verticalmente na tela, aplique min-height: 100vh; ao contêiner principal e align-items: center;. Assim, o flexbox ocupa toda a altura da página e mantém os elementos no meio.

Ajuste no CSS:

.apresentacao {
  display: flex;
  justify-content: space-between;
  align-items: center; /* centraliza verticalmente */
  min-height: 100vh;   /* ocupa toda a altura da tela */
  padding: 0 32px;
}

Esse código garante que texto e imagem fiquem alinhados ao centro, tanto no eixo horizontal quanto vertical.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!