Boa noite! Nao estou conseguindo reposicionar a imagem. Refiz o codigo e a unica coisa que mudou eh que a imagem esta pequena mas na "linha de baixo".
</head>
<body>
<img id="banner" src="banner.jpg">
<div class="principal">
<h1> Sobre a Barbearia Alura </h1>
<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 as 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">
<h2> Benefícios</h2>
<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>
<img src="beneficios.jpg" class="imagembeneficios">
</ul>
</div>
</body> CSS
body {
}
#banner {
width: 100%
}
.principal{
background: #CCCCCC;
padding: 30px;
}
h1{
text-align: center; background-color: #CCCCCC
}
p {
text-align: center;
}
#missao{
font-size:20px;
}
em strong{
color: #FF0000;
}
.itens{
font-style: italic;
}
.beneficios{
background: #FFFFFF;
padding: 20px;
}
h2 {
text-align: center;
}
ul {
display: inline-block;
vertical-align: top;
width: 20%;
margin-right: 15%
}
.imagembeneficios{
width: 50%;
}
