estou fazendo uma pagina de barbearia em html, mas estou com um problema https://uploaddeimagens.com.br/imagens/gpuKNKE
link das fotos do projeto (uso o visual studio) https://uploaddeimagens.com.br/imagens/SBrClgY https://uploaddeimagens.com.br/imagens/o-7J22U
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Barber shop</title>
<meta charset="UTF=8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<img id="barber" src="barber.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" >Nossa missão é: <em><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>
<h2>Beneficios</h2>
</div>
<div class="beneficios">
<ul>
<li class="itens">Atendimento</li>
<li class="itens">Espaço</li>
<li class="itens">Localizaçâo</li>
<li class="itens">Profissionais qualificados</li>
<img class="imgbeneficios" src="bar.jpg">
</div>
</ul>
</body>
</html>agora o arquivo style.css
body {
background-color: rgb(59, 59, 59) ;
color: whitesmoke;
font-size: 20px;
}
#barber {
width: 60%; height: 600px; margin-left:20%; margin-top: 1%;
}
.principal {
}
h1 {text-align: center;color: blanchedalmond
}
p {text-align: center;
}
#missao {
font-size: 25px;
}
em strong {
color: blanchedalmond;
}
.beneficios {
background-color: rgb(70, 70, 70); width: 15%; margin-left: 5%; \
}
h2 {
margin-left: 6%; color: blanchedalmond;
}
ul {
display: inline-block;
}
.imgbeneficios {
width:150% ;
}
.itens {
font-style: italic; margin-left: 5.8% ;
}
