Muxailo:
ладно, погадаем на скринах
специально для вас, сотворила пример из того, что написано у вас в media:
https://jsfiddle.net/9nf9bvu4/margin-left: 76.2%;
transform: translate(-76.2%);
Подвигайте ширину блока с результатом и посмотрите, что будет: при небольшой ширине верхний блок (ваш) уезжает за экран, нижний (мой) остается всегда в центре.
Поэтому, ваш блок уехал.
Ширина окна браузера на вертикально повернутом iphone5 320 точек. Вы же сравниваете эмулятор горизонтально повернутого айфона и реальный вертакально повернутый телефон.
Поэтому, разница в скринах
Откуда взялись эти странные сдвиги на 76,2%? Почему сдвиг влево не равен сдвигу вправо? Какого результата вы пытались этим ходом добиться?
