Trying to create a footer with two linked images, I used justify-content: center, but it seems to be centering the images from the start rather than their actual centers. This causes them to appear slightly off to the left.
Additionally, the images are stacking on top of each other instead of being in line as I intended.
.footer-contents {
/* display: inline-block; */
text-align: center;
}
.footer-logo {
position: relative;
/* align-items: center;
justify-content: center; */
/* margin: 0 clamp(10px, 3vw, 30px); */
/* top: 80px; */
/* flex-basis: auto; */
height: 40px;
width: auto;
}
.column {
float: left;
width: 33.33%;
margin: 5px;
/* padding: 5px; */
vertical-align: middle;
}
.row {
margin: 0 40%;
}
.row::after {
content: "";
clear: both;
display: table;
}<footer class="footer">
<div class="footer-container bg-container">
<div class="footer-content">
<div class="row">
<div class="column">
<a href="https://twitter.com/">
<img src="https://img.icons8.com/color/48/000000/twitter--v1.png" alt="" class="footer-logo">
</a>
</div>
<div class="column">
<a href="https://instagram.com/">
<img src="https://img.icons8.com/color/48/000000/instagram-new--v1.png" alt="" class="footer-logo">
</a>
</div>
</div>
</div>
</div>
</footer>