1
resposta

MEU TEXTO PRINCIPAL NÃO ESTÁ ALINHADO CORRETAMENTE

Oi, pessoal. Meu texto do

não está alinhado no centro, está a esquerda. Vou colocar meu html e css pra vocês. Quem puder consertar, fico muito grata.
<!DOCTYPE html>
<html lang="pt-br"> 
    <head>
        <meta charset="UTF-8">
        <title>Barbearia Alura</title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <header>
            <div class="caixa">
                <h1><img src="logo.png"></h1>

                <nav>
                    <ul>
                        <li><a href="index.html"> Home </a></li>
                        <li><a href="produtos.html"> Produtos </a></li>
                        <li><a href="contato.html"> Contato </a></li>
                    </ul>
                </nav>
            </div>        
        </header>

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

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

                <p> 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 id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

                <p>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>
            </section>

            <section class="Benefícios">
                <h3 class="titulo-principal">Benefícios</h3>

                <img class="utensilios" src="utensilios.jpg" alt="Utensilios de um barbeiro.">

                <ul>
                    <li class="itens">Atendimento aos clientes</li>
                    <li class="itens">Espaço diferenciado</li> 
                    <li class="itens">Localização</li>
                    <li class="itens">Profissionais Qualificados</li>
                </ul>

                <img class="imagembeneficios" src= "beneficios.jpg">
            </section>    
        </main>

        <footer>
            <img src="logo-branco.png">
            <p class="copyright">&copy Copyright Alura 2020</p>
        </footer>
    </body>
</html>
header {
    background: #BBBBBB;
    padding: 20px 0;
}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 112px;
    right: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover {
    color: #C78C19;
    text-decoration: underline;
}

.banner {
    width: 100%;
}

.titulo-principal {
    font-size: 2em;
    text-align: center;
    margin: 0 0 1em;
    clear: left;
}

.principal p {
    margin: 0 0 1em;
}

.principal strong {
    font-weight: bold;
}

.principal em {
    font-style: italic;
}

.utensilios {
    width: 150px;
    float: left;
}

.imagembeneficios {
    width: 60%;
}

footer {
    background-image: url("bg.jpg");
    text-align: center;
    padding: 40px 0;
}

.copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px 0 0;
}

1 resposta

Olá Camila,

acredito que essa dúvida tenha relação com essa já respondida.

Mas caso esteja se referindo ao alinhamento de textos em parágrafos, vc pode utilizar

text-align: center;