如何解决在HTML和CSS中分离三个并排元素的问题

我要创建的个人网站上并排包含三个元素。我想像这样构造它们：

https://imgur.com/a/FMII42f

但是相反，中间元素似乎无法自由创建以编辑边距。例如，“ margin-left”似乎根本没有任何作用。

这是我的网站当前的外观：https : //imgur.com/a/kvSiJwI

我开始认为我应该对HTML及其语义有更深入的了解，而不是尝试通过实验来学习并尝试使用不同的<..>。有人对此有任何建议吗？我想说的是，我已经完全通过免费资源，完全通过freecodecamp.org学习了HTML和CSS以及现在的JavaScript编码。

我试过浮动外部注释，分别为左和右，以及中间的“中心”，但是中心元素又相对较高（具有比其他两个更大的边距最高值），因此又表现得很奇怪。

这是与三个元素有关的部分：

<div class="Services1">
    <h2> Fine Art and Calligraphy</h2>
    <a href="sites/blog.html">
        <img src="images/FineArts.png" id="Fine">
    </a>           
</div>  

<div class="Service2">
    <h2> Chess and Mathematics Tutoring</h2>
    <a href="sites/services.html">
        <img src="images/Math.png" style="width: 300px">
    </a>
</div> 

<div class="Services3">
    <h2> Web Dev and Design </h2>
    <a href="sites/services.html">
        <img src="images/Web-Developer-Skills-1.jpg" style="width: 400px;">
    </a>
</div>

而与此相关的CSS是：

.Services1 {
    float: left;
    padding: 20px;
    border: 5px solid red;
    text-align: center
}

.Services2 {
    display: inline-block;
    margin: 20px;
}

.Services3 {
    float: right;
    margin-top: -330px;
    margin-right: 90px;
    border: 5px solid red;
    text-align: center;
}

请注意，我尝试float: center;中间元素无济于事。保证金似乎也不起作用。而且它似乎卡在左侧元素上。很奇怪。