Html CSS列显示不正确

我一直在尝试为我的网站建立一个只使用CSS的图像库。但是，列显示不正确，我找不到原因

这就是我看到的

Chrome和FF为我生成了相同的视图。当我稍微改变一下分辨率，它就会变成这样

但是它的范围很小，所以当我将页面再缩小几个像素时，框会回到它们的初始位置（第一幅图像）

这是我正在使用的CSS：

.media容器{
列数：6；
柱间距：3%；
}
.媒体容器.项目{
边缘底部：20px；
背景颜色：灰色；
显示：内联块；
}
.媒体容器.项目img{
宽度：100%；
不透明度：0；
}

. . .

如果可能，我建议在这种情况下使用CSS网格：

.media-container { 
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3%;
}

---

@鲁宁：当我把它归零的时候还是一样的。这很公平，@Eddy88。这是我从CSS中得到的最好的猜测。但显然不是这样。坚持下去！嘿，效果更好，但由于某种原因，最后一个项目被剪掉了。当使用网格时，这是一个预期的问题，还是我的外部css在干扰？编辑：好的，通过使用网格模板行计算出来。谢谢