Supporting part got overlapped in smaller screen


I've done everything and it looks fine from full screen.
When it is shown on smaller screen, supporting part got overlapped as below.

I have to learn how to deal with bootstrap to make it not overlap?
Is it something ahead of my curriculum?

Here is my CSS. I tried sth like this but I couldn't figure out.

display: inline-block
clear: both
float: left

.btn-default {
  border: 1px solid #333;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 16px 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: black;

.supporting {
  padding-top: 80px;
  padding-bottom: 100px;
  display: inline-block;

.supporting .col {
  float: left;
  width: 33%;
  font-family: 'Raleway', sans-serif;
  text-align: center;

.supporting img {
  height: 40px;

.supporting h2 {
  font-size: 23px;
  text-transform: uppercase;

.supporting p {
  font-size: 14px;
  line-height: 30px;
  padding: 0 50px;
  margin-bottom: 40px;

Thank you in advance :wink:


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.