为什么固定位置的标签在不同的html页面上的位置会稍有不同？

Question

我有一个标签（div.natalie p），该标签可以在不同的html页面上跳转（index.html左右）。 （例如html，shop.html，work.html等）。它的位置固定，并且所有css都相同，因此从技术上讲，它应该在每页上完全相同的位置，但事实并非如此。这很奇怪，因为我在另一侧具有导航标签，并且在每个html页面上的位置都完全相同。我希望所附的图片能使我的问题更清楚。

div.natalie p {
  position: fixed;
  font-family: "MenaGrotesk-Light";
  font-size: 16px;
  top: 50%;
  left: 40px;
  transform-origin: 0 0;
  transform: rotate(-90deg) translate(-50%, 0);
  z-index: 5;
}

nav {
  position: fixed;
  top: 50%;
  right: 40px;
  transform-origin: 100% 0;
  transform: rotate(90deg) translate(50%, 0);
}

nav a {
  margin: 5px;
  font-family: "MenaGrotesk-Light";
  font-size: 16px;
  transform: rotate(90deg);
  text-decoration: none;
  color: black;
  transition: 0.1s ease-out;
}

nav a:hover {
  border-bottom: solid 3px black;
}

<div class="natalie">
  <p>Natalie Taylor</p>
</div>
<nav>
  <a class="hover" href="index.html">work</a>
  <a class="hover" href="shop.html">shop</a>
  <a class="hover" href="about.html">about</a>
  <a class="hover" href="impressum.html">imprint</a>
</nav>