Supporting part got overlapped in smaller screen

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>

https://www.codecademy.com/courses/web-ext/projects/html-css-prj_broadway?user_id=527a4a4af10c607f7d001177

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>

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 ;)
<do not remove the three backticks above>

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