在CSS网格中向包装器添加填充会导致水平滚动

Question

我会在父div上添加填充，以使我的内部卡片不会超出屏幕限制，这就是我所做的

<div class="padding">
  <div class="wrapper">
    <div class="card">
      <app-character-card></app-character-card>
    </div>
    <div class="card">
      <app-character-card></app-character-card>    
    </div>
    <div class="card">
        <app-character-card></app-character-card>    
    </div>
  </div>
</div>

.wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);

}
.padding {

    margin: 10px;

}
.card {

width:100%;
height:100px;
background-color:red;
}

<div class="padding">
  <div class="wrapper">
    <div class="card">
      <app-character-card></app-character-card>
    </div>
    <div class="card">
      <app-character-card></app-character-card>    
    </div>
    <div class="card">
        <app-character-card></app-character-card>    
    </div>
  </div>
</div>

填充物使我水平滚动（我想是100％宽度+填充物）

如何在不滚动的情况下定义内部填充？

更新

我已经将班级更新为padding，现在我的padding没有居中

Answer 1

在Chrome开发者工具的此屏幕截图中，您可以看到不同值的影响。属性margin用于在元素外部添加间距，但是在您的情况下，您想使用padding在元素内部添加间距。

.container {
    padding: 10px;
}

Answer 2

您的上述代码似乎可以正常工作。您必须提供更多信息以跟踪错误。 但是对于像您这样的几乎所有情况都应该起作用的是，为CSS和html元素指定body，如下所示：

body, html{ max-width: 100%; }

我希望这行得通。

但是，如果不这样做，请提供一些代码或其他信息，以便更轻松地找到解决方法。