Estou migrando para o frontend recentemente e tenho tido dificuldades para lidar com a formatação de estilos com o CSS, alguém poderia me ajudar? Minha intenção é que o conteúdo destacado em vermelho ocupe o local da marcação verde e o resto fique centralizado na tela. Estou usando o ReactJS para a composição, porém o CSS segue as mesmas regras do tradicional com HTML puro. Como podem ver até pela imagem, design não é meu ponto forte. Código do JSX (Componente do React): ```

Código do CSS: .login-container{ display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1120px; height: 100vh; margin: 0 auto; } ``` .login-container section.form{ ``` width: 100%; max-width: 350px; } ``` .login-container section.form form{ ``` display: flex; justify-content: center; width: 100%; max-width: 1250px; height: 100%; max-height: 700px; } ``` .login-container section.form form h1{ ``` color: #fff; font-weight: bolder; text-shadow: #1B182E 2px 2px 8px; font-size: 42px; margin-bottom: 32px; position: absolute; margin-top: -65px; background: transparent; } ``` .login-container section.form form input{ ``` display: flex; justify-content: space-between; margin: 5px; width: 180px; height: 40px; max-width: 100%; font-weight: bold; padding: 8px; border-radius: 5px; color: white; background: #0A0816; border: solid #0D0929 2px; } ``` .login-container section.form form p{ } .login-container section.form form input + p + input{ ``` background: black; border: solid yellow 2px; } Pra quem não estiver afim de interpretar todo o código para tentar ajudar apenas diga o que você imagina que resolverá o problema. Obrigado desde já :) ``` ![imagem](https://forum.imasters.com.br/monthly_2020_04/1526470946_Capturadetela_2020-04-02_21-20-59.png.bcd6ec5102c83a90fab55c7ce42f4f6e.png)

Bem vindo!

bleszerd

Dúvida sobre estilização com flexbox