Meu paragráfo não fica alinhado e nem recebe a margem atribuida do css, já tentei até criar uma class para o

, porém não funcionou.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="reset.css">

<link rel="stylesheet" href="front_alura.css">

  <link rel="stylesheet" href="produtos.css">

<title>Barbearia Alura</title>

Sobre a Barbearia Alura

    <img class="utensilios" src="utensilios.jpg" alt="Utensílios 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 class="mapa-sub">
      Nosso estabelecimento está localizado no coração da cidade.
    </p>

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.448598130907!2d-46.634653385542414!3d-23.588239368469353!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Escola%20de%20Tecnologia!5e0!3m2!1spt-BR!2sbr!4v1580916426151!5m2!1spt-BR!2sbr" width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen=""></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 qualificados</li>
    </ul>
    <img src="beneficios.jpg" class="imagembeneficios" />
  </section>
</main>
<footer>
  <img src="logo-branco.png" />
  <p class="copyright">© Copyright Barbearia Alura - 2019</p>
</footer>

.mapa { padding: 3em 0; } .mapa-sub { margin: 0 0 2em; text-align: center; }