I am facing an issue where I want to keep three divs aligned horizontally on the same line, but their background colors are causing them to not align properly. Adding margin or padding causes the divs to wrap up instead of staying in line.
#service_container {
text-align: center;
}
.servicon {
font-size: 54px;
}
.service_page_tile {
background-color: rgba(161, 204, 239, 0.5);
}<div id="service_container" class="container-fluid">
<div id="s_idea" class="container-fluid">
<h2>Idea</h2>
<div class="row">
<div class="service_page_tile col-lg-4 col-md-6 col-sm-12">
<i class="servicon far fa-lightbulb"></i><br> Do you have an idea about a website you want to realize? Blog, Company Website, e-shop, V-log channel, web-app or just your personal page, I will pay special attention to the customer's output to achieve.
</div>
<div class="service_page_tile col-lg-4 col-md-6 col-sm-12">
<i class="servicon fas fa-lightbulb"></i><br> Do you still need to find out what's your deal? Let's check templates and discover what's the best formula chosen by the most succesfull people or business.
</div>
<div class="service_page_tile col-lg-4 col-md-12 col-sm-12">
<i class="servicon fas fa-video"></i><br> What about a video? A resumé, a clip for a presentation or simply your last travel on the other side of the world. there's nothing more catchy to convey emotions or ideas!
</div>
</div>
</div>