Estou treinando o que aprendi nos dois primeiros cursos de html e css, no fim do curso o prof. deu a ideia de treinar o que aprendi com a pagina de produtos na pagina principal do site. Estou tentando colocar todo o texto "sobre a Barbearia Alura..." dentro do banner, já tentei mudar o position tanto do banner como do texto mas sem sucesso, também tentei deixar o "img" do banner fora do "main", porem não consegui. Segue meu código.

        <main> 
            <img class= "banner" id="banner" src="banner.jpg">

            <h2 class="titulo-principal">Sobre a Barbearia Alura</h2>

            <p class="titulo-principal">Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

            <p class="titulo-principal"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

            <p class="titulo-principal">Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
        </main>
        .banner{
    width: 100%;
    position: inherit;
}

main{
    height: 265px;
    position: absolute;
    color: #ffffff;
}


main h2{
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}

main p{
    text-align: center;
    font-size: 25px;
}

p{
    margin: 10px;
}

.titulo-principal{

}