bootstrap col is not fitting - html

Question

When I look at my website "services" on an ipad landscape view, my services are going down one row. I have inspected the developer tools, and can see if I untick the bootstrap 33.3 %, each service will get 50%.
But I cannot see how I can get each one to fill 33.3%, when the bootstrap has defined it. I also defined how many col the div class should use. I looked through my CSS, and I do not have any padding, margin or so that should cause this.
<!-- begin services section -->
<section class="services">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="service small">
<i class="fa fa-paper-plane-o"></i>
<h3>AutoPilotHQ</h3>
<p>
I startet to have quite some experience building quality leads through journeys and landingpages. I have made scripts that can be integrated with several platforms.
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="service small">
<i class="fa fa-tablet"></i>
<h3>Mautic</h3>
<p>
I like the idea about open source marketing automation. I am currently working on different functions to generate and build more qulity leads.
</p>
</div>
</div>
</div>
</div>
</section>

Answer 1

CSS can be tricky.
The icon of service <i class="fa fa-paper-plane-o"></i> is set to float: left; and it brakes the layout.
Add this rule to fix it:
.service.small:after {
content: " ";
clear: both;
display: table;
}
Disabling the following CSS rule also repairs your layout (I am not sure why):
.services .service {
margin-bottom: 30px;
}