My bootstrap structure includes a row with 4 columns, initially set up with 3 columns containing icons that aligned perfectly. Upon adding a fourth column, the new addition appears slightly lower on the page compared to the rest, resulting in misalignment.
<div class="col-12 padding">
<h3>Feel free to check out my Github, Free Code Camp, Team Treehouse, and LinkedIn profiles!</h3>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" target="_blank"><i class="fab fa-github icons"></i></a>
<h4>GitHub</h4>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" target="_blank"><i class="fab fa-free-code-camp icons"></i></a>
<h4>Free Code Camp</h4>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" target="_blank"><i class="fi-social-treehouse icons"></i></a>
<h4>Team Treehouse</h4>
</div>
<div class="col-xs-12 col-sm-3">
<a href="#" target="_blank"><i class="fab fa-linkedin icons"></i></a>
<h4>LinkedIn</h4>
</div>
The issue lies with the third column (Team Treehouse) not aligning with the rest of the icons.
Although they are enclosed within a row div, it may not be visually evident.
UPDATE:
Upon further investigation, it appears that 3 of the icons are sourced from Font Awesome, while the Treehouse icon is from Foundation Icons. Understanding the source of the problem is the first step, but determining how to resolve it remains a challenge, especially since they are all styled to the same size.