Solucionado
Estou com um problema que a imagem não esta se alinhando com o texto lado a lado no meu código, para tentar encontrar o erro tentei ver como estava o do professor e estava tudo certo, a única diferença é que ele estava usando um único CSS pra duas paginas, ja eu uso um CSS pra cada HTML, para me manter mais organizado, então acredito que tem algum código acima no código dele que influencia nisso só não sei qual. Agradeço a ajuda desde já.
hoje, com a Alura e o Google Gemini
Família já resolvi, foi um erro bem bobo ksks, não precisa mais responder.
Se mais alguém estiver com o mesmo problema da uma olhada no tamanho da pagina, no meu caso tinha esquecido de colocar >->.
main {
width: 940px;
margin: 0 auto;
} 
O meu ficou assim no index.html logo a baixo do 
<img class="utensilios" src="utensilios.jpg" alt="Utensilios de um barbeiro.">
<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="mapa">
<h3 class="titulo-principal">Nosso estabelecimento</h3>
<p>Nosso estabelecimento esta localizado no coração da cidade.</p>
<div class="mapa-conteudo">
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d117027.74236838608!2d-46.66237669653766!3d-23.564242879773293!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1salura%20sp!5e0!3m2!1spt-BR!2sbr!4v1659532788948!5m2!1spt-BR!2sbr" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</section>
<section class="beneficios">
<h3 class="titulo-principal">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>
<li class="itens">Pontualidade</li>
<li class="itens">Limpeza</li>
</ul><img src="beneficios.jpg" class="imagem-beneficios">
</div>
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
</main>
olha o meu não conseguir esta do mesmo jeito do professor e nao conseguir conforme disse Fabio Magalhães de Souza, conferir e o meu no css esta main { 940px margim 0 auto, mais funcional, será que tem alguem que possa me ajudar?