Varför försvinner 100px av sidan på en mobil?

Hej

Jag har denna kod

body {
margin:0;
padding:0;
}

.wrapper {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: auto;
}

.top_meny {
width: 1080px;
height: 100px;
position:absolute;
left: calc(50% - 540px);
line-height: 100px;
}

<div class="wrapper">
<div class="top_meny">
Välkommen till min hemsida!
</div>


</div>

På chrome, firefox och Edge visas top div i mitten av hela sidan. Men på en telefon med upplösning 1920x1080 eller annan så ser det ut såhär

GRUND CSS jag vet men jag vet ej och hittar inte hur man centrerar rätt, många skriver på detta vis.

Tittar jag via Chrome "granskning" så visas allt över 1080px bred men under så försvinner den tills 980px sen stannar den,

Varför försvinner den in till vänster?

Nu testar jag massa kod men skriver jag i wrappen och tar bort all position information i top_meny

padding-left: calc(50% - 540px);

så fungerar det som jag vill, men vad är den korrekta "50%" css formeln? Vill CENTRERA min hemsida i mitten.