CSS在Safari和移動設備上看起來時髦

Question

下面是我的網站（overrealmgame.com/Database）的兩張圖片，第一張來自Chrome（應該看起來如此），第二張來自移動設備。正如你所看到的，不是白色居中，而是左側。任何想法CSS改變會解決這個問題？謝謝。

Chrome Version

Mobile Version

CSS：

body { 
background: #fff; 
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06); 
color: #545454; 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
font-size: 16px; 
line-height: 1.5; 
margin: 0 auto; 
max-width: 1100px; 
min-height: 800px; 
padding: 2em 2em 4em; 
background: rgba(1, 165, 45, 0.25);} 

Answer 1

我相信這個問題是因爲保證金：汽車。基本上在桌面上，任何一邊都有空閒空間，因此邊緣會使其居中。在移動設備上，沒有任何可用空間，因此它沒有任何居中空間。它看起來像你的項目的大小也超過了父容器的大小。所有這些事情一起造成了這個問題。我看不到頁面其餘部分的樣式，但它看起來像您的組件不是您認爲它們的大小。我會建議做的是打開你的開發工具並檢查元素。它應該告訴你每個項目在屏幕上的多少空間以及項目的邊距/填充。這應該可以幫助您開始瞭解發生這種情況的原因。如果您從桌面使用移動版進行調試，而不是從手機中實際打開它，它也會有所幫助。 Chrome有一個選項可以查看其他設備。