Olá, pessoal! Boa tarde!
Estou quase finalizando um projeto de Website, mas estou com problemas em uma página do projeto. Os parágrafos estão posicionados totalmente à esquerda. Fiz um pequeno exemplo no photoshop de como gostaria do resultado final e vou anexar também um print de como está o aspecto da página. Também vou deixar os códigos HTML e CSS do projeto anexados! Exemplo do resultado desejado Print de como está a página no momento Código HTML
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">Conheça os membros da banda</h1>
<div>
<h2 class="apresentacao__conteudo__subtitulo">Richard Carrasco</h2>
</div>
<p class="apresentacao__conteudo__texto">Vocal</p>
<div class="membro">
<p class="apresentacao__conteudo__texto">"Sempre gostei de cantar. Aos 12 ou 13 anos, comecei a imitar a voz do Liam Gallagher em 'Wonderwall'. Meu primo Gabriel, que já foi guitarrista da Samsara, deu a ideia de gravarmos um cover da música para o YouTube, o que acabou não acontecendo, mas sempre que eu ia à casa dele, ele tocava essa música e eu acompanhava com a voz. Na escola, cantava todos os dias na sala de aula com meu amigo Rafael. Eu e Rafael temos um amigo em comum chamado Juan, que também já foi guitarrista da Samsara (o primeiro, inclusive). Juan dizia que eu tinha uma voz legal e que deveríamos montar uma banda. Anos depois acabei levando essa ideia a sério e assim nasceu a banda. Minha maior inspiração para levar esse projeto pra frente foi o show do Paul McCartney, que fui no meu aniversário de 18 anos. Foi naquele dia que tive certeza do que queria fazer da vida."</p>
<img class="membro__img" src="Assets/Richard.png" alt="Richard cantando ao vivo" width="350px" height="353px">
</div>
Código CSS
.apresentacao{
padding: 5% 15%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 82px;
}
.apresentacao__conteudo {
width: 50%;
display: flex;
flex-direction: column;
gap: 40px;
}
.apresentacao__conteudo__titulo {
font-size: 2.25rem;
font-family: var(--fonte-primaria);
}
.titulo-destaque {
color: var(--cor-terciaria);
}
.apresentacao__conteudo__subtitulo {
font-size: 1.75rem;
font-family: var(--fonte-primaria);
color: var(--cor-terciaria);
margin-top: 3rem;
}
.apresentacao__conteudo__texto {
font-size: 1.50rem;
font-family: var(--fonte-secundaria);
text-align: justify;
line-height: 30px;
text-indent: 35px;
}
.membro {
display: flex;
align-items: center;
justify-content: space-between;
}
.membro__img {
margin-left: 25rem;
}