How do I align 3 div container next to each other using CSS when float left does not work

Question

I am trying to align my 3 service divs next to each other but instead they are each slightly lower than the other one. I think it might be the images that are making so they do not align. I have tried the following without success:

.col-md-4 {
float:left;
}

Please advise what I am doing wrong and how I can align my divs, my code is as follows:

HTML

<section id="services">
<div class="container text-center">
<h1 CLASS="title">WHAT WE OFFER</h1>
<div class="row text-center">
<div class="col-md-4 services">
<img src="images/service1.png" class="service-img">
<h4>TITLE 1</h4>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
<div class="col-md-4 services">
<img src="images/service2.jpg" class="service-img">
<h4>TITLE 2</h4>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
<div class="col-md-4 services">
<img src="images/service3.png" class="service-img">
<h4>TITLE 3</h4>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
</div>
<button type="button"class="btn btn-primary"> All Services</button>
</div>
</section>

CSS

#services
{
    padding: 80px 0;
}
.service-img
{
    width: 100px;
    margin-top: 20px;
}
.services
{
    padding: 20px;      /*service images and paragraphs do not want to align*/
    
}
.services h4
{
    padding: 5px;
    margin-top: 25px;
    text-transform: uppercase;
}
.title::before
{
    content: '';
    background: #7b1798;
    height:5px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    transform: translateY(63px);
}
#services .btn-primary
{
    box-shadow: none;
    padding: 8px 25px;
    border: none;
    border-radius: 20px;
    background-image: linear-gradient(to right,#a517ba,#5f1782);

Answer 1

Instead of using the default flow layout, the flexbox layout can help you in this situation. CSS Tricks have a great guide about it here.

Applying display: flex to the parent div .row would render its children divs .services in the flexbox layout. Further, applying the CSS declaration align-items: center; should horizontally align its children elements .services in a single line.

The full CSS rule could be:

.row {
  display: flex;
  align-items: center;
}