Text background isn't text size & centering affected

I have text that uses an image for its background. This text is center aligned so has to look perfect. The issue is that because of the image there's more space to the right. It's fine with 000 because they're all the same.

.large {
  font-family: 'Roboto', sans-serif;
  font-size: 300px;
  line-height: 0.8;
  margin: 0;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Winnersh_Meadows_Trees.jpg/1200px-Winnersh_Meadows_Trees.jpg);
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: 50% 50%;
  font-weight: 900;
  text-align: center;
}

<p class="large">000</p>

With an error number of 401 it's then not centered.

.large {
  font-family: 'Roboto', sans-serif;
  font-size: 300px;
  line-height: 0.8;
  margin: 0;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Winnersh_Meadows_Trees.jpg/1200px-Winnersh_Meadows_Trees.jpg);
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: 50% 50%;
  font-weight: 900;
  text-align: center;
}

<p class="large">401</p>

The problem I'm running into is that the text is being put off center for some reason because highlighting it all selects more space to the right and I can't figure out why this would be.

Here's an example of the extra space.

Hopefully it's clear what I mean, I'm just not sure what could be causing this.

This would be fine and doesn't always overselect on normal text, just text with the image background. It wouldn't be an issue but the text isn't actually centered.

It's perfectly fine though with 404

This might just be something that can't be changed the main issues are the text having more selectable with a select all vs highlighting with the mouse and the fact that the text isn't always centered because the character shape. Obviously the container can be made smaller for the text to fix that but then it's smaller on a 404 too. I'm just wondering how to truly center it regardless of character shape.