(HTML+CSS) There is a Dot before my Instagram Logo

Question

Im making my own Website and i inserted a picture of the Instagram Logo as a link to get to my Instagram, but on the Live server is the Instagram logo fully funktional BUT there is a Dot before the logo...

<div class="Contact">
  <h1>
    How can i get in Touch with you?
  </h1>
  <p>
    You can Contact me on Instagram,Discord or via Email!
  </p>
  <li class="ContactLink" style="margin-left: 600px;">
    <a href="https://www.instagram.com/dennisprivate04/"><img src="./img/Insta.png" alt="InstaLogo" height="50px" width="50px"></a>
</div>

Answer 1

I actually didnt wanted to anwser this question as it is already anwsered in the comments. However as a "wrong" anwser and an insufficient anwser was given, I will anwser it to have a correct solution.

The issue with your code: The dot you having is the list-style bullet you getting by having this line of code: <li class="ContactLink" style="margin-left: 600px;">. However this line of HTML code is invalid for 2 reasons. First you miss the closing tag </li>. Last but not least, a list must always be wrapped inside an ordered <ol> ... </ol> or undeorder list <ul> ... </ul>.

How to fix it: First close your list tag by adding </li>. Then wrap the entire list inside an unordered list with <ul> ... </ul>. Give the class name to the ul. Use list-style-type: none; to remove the list-style bullet.

.ContactLink {
  text-align: right;
  list-style-type: none;
}

<div class="Contact">
  <h1>
    How can i get in Touch with you?
  </h1>
  <p>
    You can Contact me on Instagram,Discord or via Email!
  </p>
  <ul class="ContactLink">
    <li>
      <a href="https://www.instagram.com/dennisprivate04/">
        <img src="./img/Insta.png" alt="InstaLogo" height="50px" width="50px">
      </a>
    </li>
  </ul>
</div>