nao consegui deixar da forma que eu queria mas ta valendo ...eu acho ^^ | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

o codigo do HTML

<!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="style2.css">

    </head>
    <body>
        <header>
            <div class="caixalogo">
                <h1><img src="logo.png"> </h1>
                    <nav>
                        <ul>
                            <li><a href="index2.html">Home</a></li>
                            <li><a href="produtos.html">Produtos</a></li>
                            <li><a href="contatos.html">Contatos</a></li>
                        </ul>
                    </nav>
            </div>

        </header>

        <main>

            <img id= "banner"src="banner.jpg">
            <div class="principal">
                <h2 class="titulo-centralizado">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>

            </div>

            <div class="beneficios">
                <h3 class="titulo-centralizado">Beneficios</h3>

                <ul class="ul-beneficios">
                    <li class="itens">Atendimento ao Clientes</li>
                    <li class="itens">Espaço diferenciado</li>
                    <li class="itens">Localicação</li>
                    <li class="itens">Profisionais Qualificados</li>
                </ul>

                <img src="beneficios.jpg" class="imagembeneficios">
            </div>
        </main>
        <footer>
            <img src="logo-branco.png">
            <p class="copyright">&copy; Copyright Barbearia Alura 2019</p>
        </footer>
    </body>

</html>

e o codigo CSS

header{ background: #CCCCCC; padding: 20px 0; }

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

nav { position: absolute; top: 110px; 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;

}

body {

}

#banner { width: 100%; }

.principal {

background: #CCCCCC;
padding: 30px;

}

.titulo-principal { padding-left: 20px; }

.titulo-centralizado { font-weight: bold; font-size: 30px; text-align: center;

}

p { text-align: center; }

#missao { font-size: 20px }

em strong { color: red; }

.itens { font-size: 20px; font-style: italic;

}

.beneficios { background: #FFFFFF; padding: 40px; }

ul { text-align: center; padding: 19px;

}

.ul-beneficios { display: inline-block; vertical-align: top; width: 20%; margin-right: 15%; }

.imagembeneficios { counter-increment: width: 50%; }

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

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

}

o que eu queria fazer era deixar a imagem do beneficio ao lado da lista mas não estava conseguindo então eu resolvi deixar desta foma acho que fica um pouco menos poluído bem eu acho ^^