Problem with sizing some elements html/css

So I am struggling to make it so some of the objects on the site don´t move around when i zoom in and out, i have searched around for a few hours and tried some tips on other threads and sites but nothing is working for me... so far i have only managed to make the text "Statistikk for Black Summer" not change size, by using vw on the font-size. It does however not work on the other elements... Below is a picture with 100% zoom and one with 175% zomm to show what happens: 100% (standard) 175% zoom

I have tried to change my values to % because i know this problem often occurs with px values, but still Im struggling. As mentioned earlier, setting the font size value to vw instead of px on the "statistikk for black summer" worked, but it did not work the other elements.

Here is my HTML code:

 <body>
    <header>
      <div class="banner">
        <div id="nav-container">
          <nav id="navbar">
            <ul>
              <li><a href="#">Start</a></li>
              <li><a href="#">Graf</a></li>
              <li><a href="#">Midtseksjon</a></li>
              <li><a href="#">Bunnseksjon</a></li>
            </ul>
          </nav>
          <img id="header" src="/images/wildfire-header.jpeg" />
        </div>

        <div id="info-box">
          <div id="white-line"></div>
          <span id="statistics"><b>Statistikk for Black Summer</b></span>

          <div id="statistic-deaths">
            <div id="statistic-bar1">
              <span id="statistic-amount1">26</span>
              <span id="statistic-typeDeaths">Dødsfall</span>
            </div>
          </div>

          <div id="statistic-animalDeaths">
            <div id="statistic-bar2">
              <span id="statistic-amount2">3 Milliard</span>
              <span id="statistic-typeAnimalDeaths"
                >Dyr død/blitt fordrevet</span
              >
            </div>
          </div>

          <div id="statistic-homesDestroyed">
            <div id="statistic-bar3">
              <span id="statistic-amount3">2448</span>
              <span id="statistic-typeHousesBurnt">Hus brent</span>
            </div>
          </div>

          <div id="statistic-hectaresBurnt">
            <div id="statistic-bar4">
              <span id="statistic-amount4">5.5 Million</span>
              <span id="statistic-typeHectaresBurnt">Hektar brent</span>
            </div>
          </div>
        </div>
      </div>
    </header>

Here comes the CSS:

body {
  margin: 0;
  padding: 0;
}
/* Her kommer banner/header som inneholder statistikk boks og nav meny */

.banner,
#header {
  height: 50vh;
  width: 100%;
}

#navcontainer {
  position: relative;
  width: 80%;
}

#navbar {
  position: absolute;
  z-index: 2;
  left: 67%;
}

#navbar ul li {
  list-style: none;
  display: inline-block;
  margin: 0 20px;
}

/* Design av statistikk boks */

#info-box {
  height: 30%;
  width: 20%;
  position: absolute;
  top: 20%;
  left: 60%;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.65);
}

#white-line {
  position: relative;
  background-color: white;
  height: 1%;
  width: 80%;
  top: 15%;
}

/* END */

/* Statistikk overskriften i boksen */

#statistics {
  position: relative;
  top: 25%;
  display: flex;
  justify-content: center;
  color: white;
  font-size: 1.35vw;
}

/* END */

/* Her kommer første statistikk baren i infoboksen som inneholder antall dødsfall */

#statistic-deaths {
  position: relative;
  background-color: #322d31;
  height: 2vh;
  width: 70%;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
}

#statistic-bar1 {
  position: relative;
  background-color: orangered;
  width: 10%;
  height: 2vh;
}

#statistic-amount1 {
  position: relative;
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  bottom: 15%;
  left: 50%;
}

#statistic-typeDeaths {
  position: relative;
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  bottom: 135%;
  left: 750%;
}

/* END */

/* Statistikk boksen for dyr som har død og blitt fordrevet under black summer */

#statistic-animalDeaths {
  position: relative;
  background-color: #322d31;
  height: 2vh;
  width: 70%;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
}

#statistic-bar2 {
  position: relative;
  background-color: orangered;
  width: 100%;
  height: 2vh;
}

#statistic-amount2 {
  position: relative;
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  bottom: 15%;
  left: 5%;
}

#statistic-typeAnimalDeaths {
  position: relative;
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  bottom: 15%;
  left: 14%;
}

/* END */

/* Statistikk boksen til antall hus brent/skadet under black summer */

#statistic-homesDestroyed {
  position: relative;
  background-color: #322d31;
  height: 2vh;
  width: 70%;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
}

#statistic-bar3 {
  position: relative;
  background-color: orangered;
  width: 45%;
  height: 2vh;
}

#statistic-amount3 {
  position: relative;
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  bottom: 15%;
  left: 11%;
}

#statistic-typeHousesBurnt {
  position: relative;
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  bottom: 15%;
  left: 125%;
}

/* END */

/* Statistikk boksen til hvor mange hektar som brente */

#statistic-hectaresBurnt {
  position: relative;
  background-color: #322d31;
  height: 2vh;
  width: 70%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

#statistic-bar4 {
  position: relative;
  background-color: orangered;
  width: 90%;
  height: 2vh;
}

#statistic-amount4 {
  position: relative;
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  bottom: 15%;
  left: 5.5%;
}

#statistic-typeHectaresBurnt {
  position: relative;
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  bottom: 15%;
  left: 39.5%;
}

/* END */

Solution

Giving the font-size a vw is the only method I know for this to work. I tested your code and it does work (see images below). The only thing I didn't add was a font-size for the navigation as you can see.

Make sure you have this line in your head tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The text moves, because you set the position with right, left, top and bottom...