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有一个选项可以查看其他设备。