How to remove the invisible clickable areas around an image with a link

So, I'm trying to make a page in my website where people can go and find out how to contact us, I'm doing it by adding an image of the application that they can contact us on and then attaching a link to it so they can just click the image and it will take them to it. However the link seems to spread out randomly so you don't even need to click on the image to get to the link you can just click on the background. Heres my HTML

<div class="social">
  <a href="https://discord.gg/">
    <li>
      <img src="https://cdn.logojoy.com/wp-content/uploads/20210422095037/discord-mascot.png" alt="discordicon" class="discord">
    </li>
  </a>
  <a href="https://www.youtube.com">
    <li>
      <img src= "https://www.iconpacks.net/icons/2/free-youtube-logo-icon-2431-thumb.png" alt="youtube" class="yt">
    </li>
  </a>
  <a href="https://steamcommunity.com">
    <li>
      <img src="https://logotyp.us/files/png/steam.png" alt="steamgroup" class="steam">
    </li>
  </a>
</div>

Here is my CSS

 .discord {
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    position: relative;
    display: flex;
    top: 400px;
    right: 600px;
}
.yt {
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    position: relative;
    display: flex;
    top: -80px;
    right: -575px;
}
.steam {
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    position: relative;
    display: flex;
    top: -655px;
}