Safariとモバイルでファンキーに見えるCSS

Question

以下は、私のウェブサイト（overrealmgame.com/Database）からの2つの画像です（Chromeからの最初の画像（表示方法）、2番目の画像は携帯端末からのものです）。あなたが見ることができるように、中央に白い中心があるのではなく、左に固定されています。どのような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には、別のデバイスとして表示するオプションがあります。