Struggling to split a section of my project into 4 equal parts using the bootstrap col attribute. Unfortunately, every time I try, the last container ends up breaking and shifting below the other 3, creating an unsightly code layout. index.html
<section id="technical_stack">
<h1 class="section_header">Technical Skills</h1>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 m-2 p-2 skills_tiles">
Programming Languages<br>
<span class="skills">
<i class="fa-solid fa-film"></i>
<i class="fa-solid fa-film"&{...}<i>
</span>
</div>
{...}
</div>
</div>
</section>
styles.css
.skills_tiles {
margin-right: 10px;
margin-bottom: 10px;
display: grid;
background-color: white;
color: #212529;
border-radius: 5px;
padding: 42px 22px;
cursor: crosshair;
position: relative;
top: 0;
transition: ease-in-out 0.4s;
}
.skills_tiles:hover {
background: #212529;
color: white;
}
https://i.sstatic.net/edfDB.png Facing an issue where one column drops down, disrupting the layout intended by using columns. Need help in distributing the columns equally with a clean margin.