Is there a way to reduce the gap between the "linkedin" images in my Bootstrap footer template? I've tried replacing the default images on the right side with linkedin icons, but I can't seem to adjust the padding/margin properly. Here's the code snippet:
HTML:
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
</a>
<span class="mb-3 mb-md-0 text-body-secondary">© 2024</span>
</div>
<ul class="nav col-md-3 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"></svg><img src="./assets/linedkin.png" class="bi" width="24" height="24" /></a></li>
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"></svg><img src="./assets/linedkin.png" class="bi" width="24" height="24" /></a></li>
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"></svg><img src="./assets/linedkin.png" class="bi" width="24" height="24" /></a></li>
</ul>
</footer>
I have attempted to adjust the padding using CSS:
.ms-3 {
padding-left: 0.25rem; /* Adjust the left padding */
padding-right: 0.25rem; /* Adjust the right padding */
}