如何让这些卡片在 Flexbox CSS 中并排放置

Question

我一直在尝试很多配置来让这 3 张卡片在使用 Flexbox 时并排显示。我已经调整了宽度和列/行。我哪里错了？

Flexbox 是做到这一点的最佳方法吗？我认为这比使用网格更容易，但它给我带来了问题，我只需要完成这一部分。其他弹性盒元素运行良好。不知道为什么这给我带来了这么多问题。

.servicios {
  text-align: center;
  color: #C7567C;
  font-family: "Josefin Sans", sans-serif;
  background-color: #FFF1F4;
}

.servicescontainter {
  display: flex;
  flex-wrap: wrap;
}

.card {
  background-color: #E1E1E6;
  font-family: "Josefin Sans", sans-serif;
  color: #C7567C;
  justify-content: center;
  flex-direction: column
}

<div class="servicios">
  <h2>Servicios para:</h2>
  <div class=servicescontainer>
    <div class="card">
      <div><img src="../7898491_company_business_finance_office_marketing_icon.png" alt="Negocios"></div>
      <h3>Negocios</h3>
      <p>Ofrecemos una<br> variedad de<br> servicios para<br> statisfacer las<br> necesidades de su<br> negocio.
      </p>
    </div>
    <div class="card">
      <div><img src="../9204022_family_mother_child_father_soldier_icon.png" alt="Individuos y Familias"></div>
      <h3>Individuos y<br> Familias
      </h3>
      <p>Podemos ayudarle<br> con muchos de sus<br> documentos y<br> formularios
        <br> individuales o<br> familiares.
      </p>
    </div>
    <div class="card">
      <div><img src="../115766_bubble_comment_speech_chat_talk_icon.png" alt="Otra"></div>
      <h3>Otra</h3>
      <p>¿No ves algo en la<br> lista? ponte en<br> contacto con<br> nosotros para ver<br> cómo podemos<br> ayudarte
        <br>
      </p>
    </div>
  </div>
</div>

Answer 1

只是为了结束这篇文章，Paulie_D 的评论就是答案：

.servicescontainter

错别字^