position:fixed スマホ画面だけ中央からずれるのを解決

画面中央にローディングを付けたい場合やナビゲーションを固定したい場合。<div class=”container”>の中に要素を入れなければならない時がありますよね。
スマホ画面ではなぜか中央値がずれてしまう現象があります。
原因はメディアクエリでスマホ画面の時だけ両横をpaddin:2emで余白をつくっていたからなのですが…💦
なぜか左側の余白分だけずれて横幅はそのままなので左側は余白分はみ出すという謎の現象に。

そんな時はposition: fixed;をつけているところにleft:0;を入れましょう。

.wrap {
	z-index: 99999;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/*本体*/
.testimg,
.testimg::after {
	border-radius: 50%;
	width: 5em;
	height: 5em;
}

.wrap {
	z-index: 99999;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	left:0;
}