Não consigo colocar o título benefícios igual o titulo "sobre a barbearia alura"

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

            <div class="conteudo-beneficios">

                <ul class="lista-beneficios">
                    <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 id="beneficios" src ="beneficios.jpg" class="imagem-beneficios">
            </div>

/* css da página inicial*/

.banner {
    width:100%;
}

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

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

.principal strong {
    font-weight: bold;
}

.principal em {
    font-style: italic;
}

.utensilios {
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}

.mapa {
    padding: 3em 0;
}

.mapa p {
    margin: 0 0 2em;
    text-align: center;
}

.beneficios {
    padding: 3em 0;
}

.conteudo-beneficios {
    width: 640px;
    margin: 0 auto;
}

.lista-beneficios {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}