Need help hiding text/marker/line something next to my images

Question

I have a simple HTML site with CSS going, but i noticed a very very small line next to all my uploaded images that i use for links. I'm guessing that this is like a direction to img position, but it is so small that i can't actually see what it is. Anyone know what it is and how i get rid of it???

Picture or it didn't happen the 4 images, with 1 working and 3 displaying the thingy

body {
  background-image: url("Baggrund.png");
}

.title {
  font-family: sans-serif;
  color: #2E2E2E;
  font-size: 50px;
  margin-top: 100px;
  font-weight: 1000;
}

.container {
  position: relative;
  width: 200px;
  height: 200px;
  display: inline-block;
  margin-left: 50px;
  margin-top: 50px;
}

.image {
  display: block;
  width: 200px;
  height: 200px;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: sans-serif;
}

.overlayFade {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.overlay {
  position: absolute;
  opacity: 0;
  transition: all .3s ease;
  background-color: #008cba;
}

.container:hover .overlay,
.container:hover .overlayFade {
  opacity: 1;
}

<div align="center">
  <div>
    <div class="container">
      <a href="randomsite.com" </a>
        <img src="https://dummyimage.com/300x300/3939de/fff" alt="Tips" class="image">
        <div class="overlay  overlayFade">
          <div class="text">QGIS Tips & Tricks</div>
        </div>
    </div>
    <div class="container">
      <a href="randomsite.com" </a>
        <img src="https://dummyimage.com/300x300/3939de/fff" alt="KortInfo" class="image">
        <div class="overlay overlayFade">
          <div class="text">KortInfo</div>
        </div>
    </div>
    <div class="container">
      <a href="randomsite.com" </a>
        <img src="https://dummyimage.com/300x300/3939de/fff" alt="Metadata" class="image">
        <div class="overlay overlayFade">
          <div class="text">Metadatabasen</div>
        </div>
    </div>
    <div class="container">
      <a href="randomsite.com" </a>
        <img src="https://dummyimage.com/300x300/3939de/fff" alt="A-Z" class="image">
        <div class="overlay overlayFade">
          <div class="text">A-Z</div>
        </div>
    </div>
  </div>

Answer 1

That is the underline that is present default in the anchor tag i just used text-decoration: none on the anchor tag and it is gone I hope this is what you are looking for

body {
  background-image: url("Baggrund.png");
}

.title {
  font-family: sans-serif;
  color: #2E2E2E;
  font-size: 50px;
  margin-top: 100px;
  font-weight: 1000;
}
a
{
text-decoration:none;
}

.container {
  position: relative;
  width: 200px;
  height: 200px;
  display: inline-block;
  margin-left: 50px;
  margin-top: 50px;
}

.image {
  display: block;
  width: 200px;
  height: 200px;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: sans-serif;
}

.overlayFade {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.overlay {
  position: absolute;
  opacity: 0;
  transition: all .3s ease;
  background-color: #008cba;
}

.container:hover .overlay,
.container:hover .overlayFade {
  opacity: 1;
}

<div align="center">
  <div>
    <div class="container">
      <a href="randomsite.com" </a>
        <img src="https://dummyimage.com/300x300/3939de/fff" alt="Tips" class="image">
        <div class="overlay  overlayFade">
          <div class="text">QGIS Tips & Tricks</div>
        </div>
    </div>
    <div class="container">
      <a href="randomsite.com" </a>
        <img src="https://dummyimage.com/300x300/3939de/fff" alt="KortInfo" class="image">
        <div class="overlay overlayFade">
          <div class="text">KortInfo</div>
        </div>
    </div>
    <div class="container">
      <a href="randomsite.com" </a>
        <img src="https://dummyimage.com/300x300/3939de/fff" alt="Metadata" class="image">
        <div class="overlay overlayFade">
          <div class="text">Metadatabasen</div>
        </div>
    </div>
    <div class="container">
      <a href="randomsite.com" </a>
        <img src="https://dummyimage.com/300x300/3939de/fff" alt="A-Z" class="image">
        <div class="overlay overlayFade">
          <div class="text">A-Z</div>
        </div>
    </div>
  </div>