How do I horizontally center 2 or more divs on the same line

Question

How do I center them, on the same line, with the same width between each other, regardless of the resolution?

<div id="stats">
<div class="box">
    <i class="fas fa-cloud"></i>
    <p>Members</p>
</div>
<div class="box">
    <i class="fas fa-cloud"></i>
    <p>Awards</p>
</div>
<div class="box">
    <i class="fas fa-cloud"></i>
    <p>Countries</p>
</div>
</div>

Answer 1

You can use flexbox in css for that:

#stats {
  display: flex;
  justify-content: space-evenly;
}

<div id="stats">
  <div class="box">
    <i class="fas fa-cloud"></i>
    <p>Members</p>
  </div>
  <div class="box">
    <i class="fas fa-cloud"></i>
    <p>Awards</p>
  </div>
  <div class="box">
    <i class="fas fa-cloud"></i>
    <p>Countries</p>
  </div>
</div>

Read more about it here.

Answer 2

.stats {
   display:flex;
   justify-content:space-evenly
}

display:flex is a great option.