Css Icon padding spills outside the section box - html

Question

I just started using css for a personal project where i want to show a set of icons one on the side of the other and aligned, i found a part of them on font-awesome and the others on aenter code herenother database.
The problem is the non font-awesome icons padding spills in the section above. I still can align them using more padding but in this way the design is not responsive anymore and resizing the window they get disaligned.
This is how it looks like without the 2.55% padding https://imgur.com/a/J4hNO
After reading about font-awesome default padding i tried resetting it but didn't work.
This is the css and html of one of the sections:
.one-fourth {
width: 20%;
float: left;
text-align: center;
color: #e0e0e0;
background-color: #4fb3bf;
}
#python i {
vertical-align: bottom;
border: 3px solid red;
padding-top: 2.55%;
}
.one-fourth i {
color: #e0e0e0;
max-height: 100px;
font-size: 500%;
padding: 13% 0 4%;
}
<section class="one-fourth" id="python">
<td>
<i class="icon-python"></i>
</td>
<h3>Python</h3>
</section>

Answer 1

After fiddling with the values and the various functions I found that the only way is to align the blocks not using the padding with a percentage value, but with a px value, so instead of
#python{
padding-top:2.55%;
}
.one-fourth{
:padding-top:13%;
}
I had to use
#python{
padding: 34px 0 0;
}
.one-fourth{
padding: 30px 0 20px;
}