当我到达断点480px时，我在body上设置的右侧填充消失了

Question

我的代码中有一些文章显示了网格。我已经将body的padding设置为padding: 0 1em;以下元素和类的最小宽度为 450px；

有人可以告诉我为什么当我低于断点 480px 时右侧的填充会消失吗？？？

这是我的页面在断点 480px 以下的屏幕截图：

这是我的 CSS 片段：

body{
      padding: 0 1rem;
}

/* Media Queries */

.article-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(450px, auto));
      column-gap: 30px;    
      row-gap: 50px;
}



/* Utilities */

nav,
.article-container,
article,
.jour-hero,
.about-hero{
      margin: 0 auto;
}

footer,
nav,
.jour-hero,
.about-hero,
.hero{
      min-width: 450px;
}


nav,
.jour-hero,
.about-hero,
.hero,
.article-container{
      max-width: 1600px;
}

Answer 1

拉胡尔的评论很接近，但这实际上是你设定的边距。如果只有一列，则

column-gap

属性不会产生任何效果，但每一侧都有

1rem

的边距。

1rem

几乎总是 16px，所以加起来就是 482px。如果您不想创建完全不同的布局，我会将宽度从

min-width: 450px

更改为

min-width: min(450px, calc(100vw-2rem))

。