minha resposta | HTML5 e CSS3 parte 4: avançando no CSS

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="style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Marck+Script&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <header>
      <div class="caixa">
        <h1><img src="logo.png" /></h1>

        <nav>
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="produtos.html">Produtos</a></li>
            <li><a href="contato.html">Contato</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <img class="banner" src="banner.jpg" />

    <main>
      <section class="principal">
        <h2 class="titulo-principal">Sobre a Barbearia Alura</h2>
        <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 class="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 está localizado no coração da cidade.</p>

        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.4499774665355!2d-46.634520585421484!3d-23.588189868467822!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Escola%20de%20Tecnologia!5e0!3m2!1spt-BR!2sbr!4v1662935666044!5m2!1spt-BR!2sbr"
          width="100%"
          height="300"
          style="border: 0"
          allowfullscreen=""
          loading="lazy"
          referrerpolicy="no-referrer-when-downgrade"
        ></iframe>
      </section>

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

        <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</li>
        </ul>

        <img src="beneficios.jpg" class="imagembeneficios" />

        <div class="video">
          <iframe
            width="560"
            height="315"
            src="https://www.youtube.com/embed/wcVVXUV0YUY"
            title="Scissor Cut Short Back and Sides Men's Haircut"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          ></iframe>
        </div>
        >
      </section>
    </main>

    <footer>
      <img src="logo-branco.png" />
      <p class="copyright">&copy; Copyright Barbearia Alura - 2022</p>
    </footer>
  </body>
</html>

css:

/* 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;
}

/*.beneficios ul {
  display: inline-block;
  vertical-align: top;
  width: 18%;
  margin-right: 15%;
  margin-left: 10%;
}*/

.imagembeneficios {
  width: 50%;
}

.mapa {
  padding: 3em 0;
}

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

.video {
  width: 560px;
  margin: 1em auto;
}