Why does CSS render differently on other computers?

Question

css

A project on VUE JS, a
friend sent a screen from a computer that the text is displayed incorrectly, which is blue, it is shifted.
I tested on all my browsers, with all extensions turned off. I also checked the site through incognito. It displays fine for me, but it doesn't display correctly for other people.

What could be causing this?

Screenshot from my computer: Screenshot


from another person's computer:

<div class="content">
     <div class="bio-fade">
        <h2>Glinka</h2>
        <h2>Anastasya</h2>
      </div>

     <div class="container">
        <div class="bio">
          <h1>Hello,</h1>
          <h2>I'm GLINKA</h2>
        </div>
    </div>
</div>

.container {
  width: 90%;
  margin: 0 auto;
  z-index: 999;
}

.content {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  justify-items: start;
  position: relative;
  overflow: hidden;
  margin-left: var(--nav-width);
}

.bio {
  height: 20%;
  width: 100%;
  text-align: left;
  z-index: 999;
  margin-top: 8em;
}

.bio-fade {
  position: absolute;
  right: 310px;
  top: 60px;
  z-index: 1;
}

.bio-fade h2 {
  margin: 0;
  text-transform: uppercase;
  text-align: left;
  color: #0b022d;
  font-size: 5rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
}

.bio-fade h2:last-child {
  transform: translateY(22px);
}

Answer 1

I'm wildly sorry for my question, the problem was that people had different display scales in the browser: D

Answer 2

Your friend has a different screen resolution and/or aspect ratio. All pixel values ​​need to be converted to relative units

Answer 3

I usually do this:
1. Find out all the parameters of that computer in order to be able to repeat what is happening
**For example, in safari on a poppy, placeholders and inputs on one site behaved very differently, so I would understand what was wrong, and not so it was on the iPad, I installed a virtual machine and a poppy OS ... because I myself work in Windows.
2. You open the layout here and there and compare, sometimes you can find the difference in the default values.
3. if there is no difference in the parameters, then just try to "nail" all the parameters, set the same values ​​wherever possible. In rare cases, you can write code that will change the layout depending on the device or browser.
Sometimes the system fonts are stupidly different... which even seem to be called the same...