屏幕宽度为 450 像素的 CSS 网格不会居中

Question

所以我需要有人来证明我的代码，因为我认为它可能缺少div或更多的东西。

基本上，HTML代码的一部分在台式机平板电脑等大屏幕上工作正常，但是在宽度低于450px的移动屏幕上，它不会居中，我只是想知道原因是什么。

我已经使用过CSS网格并尝试修复它

该部分位于：

<div class="main-rules">
<div class="section-rules">
<h2 class="rules-heading">Rules/Guidelines</h2>
<div class="rules">

这是JSFIDDLE：

https://jsfiddle.net/kpwsbfc2/

这是真实的网站：

http://tawedgame.epizy.com/index.php

Answer 1

请添加

@media(max-width:450px){
h2.rules-heading {
word-break: break-all;
}
.player-value {
width: 280px;
}
.player-value button {
width: 113px;
}
.player-value span {
margin: 0 -48px;
}
}