Icon divs not showing up on the same line - html

Question

I have 4 icons on the landing page I'm building, each in their own div. For some reason, rather than keeping all 4 on the same line and resizing automatically, it keeps 3 on one line, and the 4th is always on a 2nd line, as you can see in the image below. What could be causing this to happen to just that one icon?
Here's the HTML:
<section id="services">
<div class="container">
<div class="row" id="services-positioning">
<div class="col-md-4 service-content sc1">
<span><i class="fa fa-hdd-o"></i></span>
<h4>Get Inspired</h4>
</div>
<div class="col-md-4 service-content sc2">
<span><i class="fa fa-diamond"></i></span>
<h4>Get Rewarded</h4>
</div>
<div class="col-md-4 service-content sc3">
<span><i class="fa fa-envelope-o"></i></span>
<h4>Be Creative</h4>
</div>
<div class="col-md-4 service-content sc4">
<span><i class="fa fa-envelope-o"></i></span>
<h4>Stay Connected</h4>
</div>
</div>
</div>
</section>
Relevant CSS:
#services {
padding: 100px 0;
}
.container {
width: 100%;
max-width: 400px;
}
#services2 .col-md-4 {
margin-bottom: 50px;
}
.service-content {
cursor: pointer;
}
/*
#services-positioning{
display: inline-block;
}
*/
.service-content span {
display: table;
margin: 0px auto 25px;
color: #3498db;
text-align: center;
transition: 0.3s;
-webkit-transition: 0.3s;
position: relative;
border: 2px solid #3498db;
width: 100px;
height: 100px;
display: table;
font-size: 35px;
border-radius: 50%;
padding-top: 22px;
}
.service-content:hover span {
background: #3498db;
color: #fff;
transition: 0.3s;
-webkit-transition: 0.3s;
}
.service-content:hover i {
transition: 0.3s;
-webkit-transition: 0.3s;
}
.service-content h4 {
font-size: 17px;
text-align: center;
font-weight: 700;
margin: 0px 0px 10px;
text-transform: none;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.service-content p {
font-size: 14px;
text-align: center;
line-height: 22px;
margin: 0 0 10px;
color: #777;
font-weight: 300;
padding: 0 20px;
}
.service-content a {
color: #3498DB;
font-size: 14px;
text-align: center;
display: table;
margin: 0 auto;
}
.service-content a i {
font-size: 14px;
margin-left: 5px;
}
.service-content a:hover {
color: #000;
}

Answer 1

Change from col-md-4 to col-md-3. In Bootstrap, "col-md-4" means that, on a "medium"-width viewport (or larger), the element will span across 4 columns out of a total of 12 (twelve is just the arbitrary number of columns that exist in Bootstrap). Thus, only 3 items with that class name can fit in a line.
Here's a nice visual explanation of Bootstrap's grid system from their official docs.