Popper.js工具提示偏离中心/位置错误

Question

工具提示并未直接位于我的社交链接下方。它们是图像，而不是字形，并且它们之间有页边空白。

https://imgur.com/a/VNiqLpz

我尝试删除页边空白。

.links {
  width: 100%;
  background-color: var(--main-background-color);
  height: 40px;
  line-height: var(--main-line-height);
  border-top: var(--border-lines);
}

.link-img {
  width: 30px;
  text-align: center;
  margin-right: 3%;
  transition: opacity .3s ease-in-out;
  opacity: 1;
}

.link-img2 {
  /*FIXES YOUTUBE CENTERING ISSUE*/
  width: 30px;
  text-align: center;
  transition: opacity .3s ease-in-out;
  opacity: 1;
}

<div class="links">
  <div class="sociallinks">
    <a href="https://www.facebook.com"><img class="link-img" src="img/socials/facebook.png" alt="Facebook" data-toggle="tooltip" data-placement="bottom" title="Hooray!"></a>
    <a href="https://www.twitter.com/"><img class="link-img" src="img/socials/twitter.png" alt="Twitter" data-toggle="tooltip" data-placement="bottom" title="Hooray!"></a>
    <a href="mailto:random@gmail.com?Subject=Website%20Enquiry"><img class="link-img" src="img/socials/mail.png" alt="Mail" data-toggle="tooltip" data-placement="bottom" title="Hooray!"></a>
    <a href="https://www.instagram.com"><img class="link-img" src="img/socials/instagram.png" alt="Instagram" data-toggle="tooltip" data-placement="bottom" title="Hooray!"></a>
    <a href="https://www.youtube.com"><img class="link-img2" src="img/socials/youtube.png" alt="Youtube" data-toggle="tooltip" data-placement="bottom" title="Hooray!"></a>
  </div>
</div>