How should I position text over an image track in this html/css page?

I’ve been confused about this for a while, and I don’t know how to do this. I want to put text, (seen in HTML and CSS files after this explanation) over images and I cannot seem to figure it out, because adding anything breaks it.

body {
  display: grid;
  place-items: center;
  height: 100vh;
  background-color: rgb(20, 20, 20);
  margin: 0rem;
  overflow: hidden;
}

.div {
  position: relative;
  width: 400px;
}

.image {
  width: 100%
}

h1 {
  position: absolute;
  font-size: clamp(3vw, 10vw, 1vw);
  font-family: 'Space Mono', monospace;
  font-weight: bold;
  color: white;
  padding: 0rem clamp(1rem, 2vw, 3rem);
  border-radius: clamp(0.4rem, 0.75vw, 1rem);
  top: 35%;
  left: 2%;
}

h2 {
  position: absolute;
  font-size: clamp(3vw, 10vw, 1vw);
  font-family: 'Space Mono', monospace;
  font-weight: bold;
  color: white;
  padding: 0rem clamp(1rem, 2vw, 3rem);
  border-radius: clamp(0.4rem, 0.75vw, 1rem);
  top: 33%;
  left: 13.15%;
}

h3 {
  position: absolute;
  font-size: clamp(3rem, 10vw, 1rem);
  font-family: 'Space Mono', monospace;
  font-weight: bold;
  color: white;
  padding: 0rem clamp(1rem, 2vw, 3rem);
  border-radius: clamp(0.4rem, 0.75vw, 1rem);
  top: 31%;
  left: 26.87%;
}

.hyp {
  user-select: none;
  position: absolute;
  font-size: clamp(3rem, 10vw, 1rem);
  font-family: 'Space Mono', monospace;
  font-weight: bold;
  color: white;
  top: 30%;
}

h1:hover {
  background-color: white;
  color: black;
}

h2:hover {
  background-color: white;
  color: black;
}

h3:hover {
  background-color: white;
  color: black;
}

#image-track {
  display: flex;
  gap: 2.5vmin;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(0%, -50%);
  user-select: none;
  /* -- Prevent image highlighting -- */
}

#image-track>.image {
  width: 40vmin;
  height: 56vmin;
  object-fit: cover;
  object-position: 100% center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" initial-scale="1">
  <meta charset="UTF-8">
  <title>∘₊✧Profiles✧₊∘</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=Rubik&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap" rel="stylesheet">
</head>

<body>
  <style>
    div.a {
      text-align: center;
    }
  </style>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- partial:index.partial.html -->

  <div class=”img-container” id="image-track" data-mouse-down-at="0" data-prev-percentage="0">


    <img class="image track1" src="https://images.unsplash.com/photo-1524781289445-ddf8f5695861?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" width="40vmin" height="56vmin" draggable="false" />
    <h1 class="steamText" data-value="STEAM">STEAM</h1>

    <img class="image track2" src="https://images.unsplash.com/photo-1610194352361-4c81a6a8967e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1674&q=80" width="40vmin" height="56vmin" draggable="false" />
    <h2 class="discordText" data-value="DISCORD">DISCORD</h2>

    <img class="image track3" src="https://images.unsplash.com/photo-1618202133208-2907bebba9e1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" width="40vmin" height="56vmin" draggable="false" />
    <h3 class="warframeText" data-value="WARFRAME">WARFRAME</h3>

    <img class="image track4" src="https://images.unsplash.com/photo-1495805442109-bf1cf975750b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" width="40vmin" height="56vmin" draggable="false" />

    <img class="image track5" src="https://images.unsplash.com/photo-1548021682-1720ed403a5b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" width="40vmin" height="56vmin" draggable="false" />

    <img class="image track6" src="https://images.unsplash.com/photo-1496753480864-3e588e0269b3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2134&q=80" width="40vmin" height="56vmin" draggable="false" />

    <img class="image track7" src="https://images.unsplash.com/photo-1613346945084-35cccc812dd5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1759&q=80" width="40vmin" height="56vmin" draggable="false" />

    <img class="image track8" src="https://images.unsplash.com/photo-1516681100942-77d8e7f9dd97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" width="40vmin" height="56vmin" draggable="false" />
  </div>
  <!-- partial -->
  <script src='const script = document.createElement("script"); script.src = "https://kit.fontawesome.com/1ee8f271b9.js"; document.body.appendChild(script);'></script>
  <script src="./script.js"></script>
</body>

</html>

When I try adding a div to separate all of the text, the track breaks, and the images are no longer aligned, have the parallax effect, or any other effects