您可以通过添加以下内容来获得以所需方式排列的显示内联元素

vertical-align: top

.box1,
.box2,
.box3 {
  vertical-align: top;
}

.box1 {
  color: #314370;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
}

.box2 {
  color: #314370;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
}

.box3 {
  color: #314370;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
}

<center>
  <div class="box1" id="info"><img src="images/clock.png" width="100px"><br><b style="color:#223a66">Working hours:</b><br>
    <p style="color:grey">Mon-Fri 09:00 am-18:00 pm<br> Sat-Sun 10:00 am-17:00 pm<br> Public Holidays 10:00 am-17:00 pm</p>
  </div>
  <div class="box2"><img src="images/s3.png" width="100px"><br><b style="color:#223a66"></b>
    <b>Walk ins are welcome</b><br>
    <p style="color:grey">
      No appointment needed<br> Open seven days a week <br>and 365 days a year
    </p>
  </div>
  <div class="box1"><img src="images/mail.png" width="100px"><br><b>Contact Us:</b><br>
    <p style="color:##223a66;"><b>---@-----.---</b></p>
    <p style="color:##223a66;"><b> Call: ---</p>
</b></p>
    <!--<p style="color:grey;">
          Make Enquiries=<br>-->


  </div>
  </div>
</center>

Flexbox

Flexbox将允许您将项目彼此对齐。但是，您需要添加flex-wrap: wrap以允许在小于900px宽度的屏幕上使用“换行符”。否则元件将被压扁。可以使用gap属性将元素彼此分开。总的来说，Flexbox在浏览器上有最好的支持，包括过时的IE。要按照预期的方式对元素进行集中，可以使用justify-content: center;：

.box {
  color: #314370;
  border-radius: 25px;
  min-height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
}

section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em;
}

<section>
  <div class="box" id="info"><img src="images/clock.png" width="100px"><br><b style="color:#223a66">Working hours:</b><br>
    <p style="color:grey">Mon-Fri 09:00 am-18:00 pm<br> Sat-Sun 10:00 am-17:00 pm<br> Public Holidays 10:00 am-17:00 pm</p>
  </div>
  <div class="box"><img src="images/s3.png" width="100px"><br><b style="color:#223a66"></b>
    <b>Walk ins are welcome</b><br>
    <p style="color:grey">
      No appointment needed<br> Open seven days a week <br>and 365 days a year
    </p>
  </div>
  <div class="box"><img src="images/mail.png" width="100px"><br><b>Contact Us:</b><br>
    <p style="color:##223a66;"><b>---@-----.---</b></p>
    <p style="color:##223a66;"><b> Call: ---</b></p>
  </div>
</section>

CSS Grid

与Flexbox不同，Grid允许您在类似表格的布局中对齐元素。它固定在这些单元格上，不支持某些特定内容，例如flexbox等中心元素。但是，您可以使用它来尽可能地占据空间：

.box {
  color: #314370;
  border-radius: 25px;
  min-height: 300px;
  box-shadow: 0 3px 10px darkgrey;
}

section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr) );
  grid-gap: 1em;
}

<section>
  <div class="box" id="info"><img src="images/clock.png" width="100px"><br><b style="color:#223a66">Working hours:</b><br>
    <p style="color:grey">Mon-Fri 09:00 am-18:00 pm<br> Sat-Sun 10:00 am-17:00 pm<br> Public Holidays 10:00 am-17:00 pm</p>
  </div>
  <div class="box"><img src="images/s3.png" width="100px"><br><b style="color:#223a66"></b>
    <b>Walk ins are welcome</b><br>
    <p style="color:grey">
      No appointment needed<br> Open seven days a week <br>and 365 days a year
    </p>
  </div>
  <div class="box"><img src="images/mail.png" width="100px"><br><b>Contact Us:</b><br>
    <p style="color:##223a66;"><b>---@-----.---</b></p>
    <p style="color:##223a66;"><b> Call: ---</b></p>
  </div>
</section>

旁注

CSS是重复的。CSS的主要优点是性能，不需要重复代码，而是为多个元素和文档重用代码。
在你的CSS中，所有的盒子都有完全相同的样式。因此，应该使用一个公共类，并将相同的样式应用于所有元素。你也应该在你的案例中使用语法。与其每4个角声明一个25px的边界半径，你可以简单地在一个调用中处理所有的边界，并对其应用相同的弯曲：

.box {
  color: #314370;
  border-radius: 25px;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
}

仅这一项就可以将CSS代码减少70%以上。