1
resposta

[Dúvida] Parágrafos posicionados totalmente à esquerda

Olá, pessoal! Bom dia!

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! Insira aqui a descrição dessa imagem para ajudar na acessibilidade Exemplo do resultado desejado Insira aqui a descrição dessa imagem para ajudar na acessibilidade 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;
}
1 resposta

Mano, acredito que seja a width do ".apresentacao__conteudo" que está travando o texto até ali.