So, I’ve been working on getting a div to be in the middle of the screen, but under certain circumstances and I found out that left: 50%; works to get it in the middle, but right: 50%; doesn’t and there is one scenario where I may need that, so why doesn’t right:50%; get it in the middle of the screen?

And there literally are similar posts, but in one of them that specifically asks my same question, they switch it in the answer and code to left:50%; so that was annoying and weird.

The code that I have basically works.

#header {
    position: sticky;
    left: 50%;
    width: 200px;
    height: 160px;
    left: calc(50% - 100px);
  }

But the code I’d like to work is this.

#header {
    position: sticky;
    right: 50%;
    width: 200px;
    height: 160px;
    right: calc(50% - 100px);
  }