Css 使用媒体查询调整流体栅格每行上的图像数

我正在使用下面的代码，以便我的图像排列从一行5调整为4，然后根据容器的不同宽度向下调整为2

在第一个实例中，它正确地设置了每5个图像（每行的最后一个），因此它没有右边距。当它缩小到每个屏幕上的4个图像时，它会发生变化，因此每4个图像都没有右边框，但由于某些原因，第5个图像仍然没有右边框。此外，当它捕捉到每行上的2个图像时，第5个图像仍然没有右边距

我需要改变什么来阻止这种情况发生？事先谢谢你的帮助

@media (max-width: 1200px) {
  #photos img {
  /* 5 images wide */
  width: 18% ; margin: 0 2.5% 2.5% 0;
  }
  #photos img:nth-child(5n) { margin: 0 0 2.5% 0; }
}

@media (max-width: 800px) {
  #photos img {
  /* 4 images wide */
  width: 22% ; margin: 0 4% 4% 0;
  }
  #photos img:nth-child(4n) { margin: 0 0 4% 0; }
}

@media (max-width: 400px) {
  #photos img {
  /* 2 images wide */
  width: 48% ; margin: 0 4% 4% 0;
  }
  #photos img:nth-child(2n) { margin: 0 0 4% 0; }
}

---

编辑：这里有一个-我比下面列出的多添加了一个媒体查询，但问题仍然是一样的。

您为max width:1200px定义的属性用于max width:800px和400px

您必须重新定义您的

：第n个子项（5n）

也许最好在查询中定义一个最小宽度

@media (min-width:800px) and (max-width: 1200px) {
  #photos img:nth-child(5n) { margin: 0 0 2.5% 0; }
}

因此，当屏幕大小介于1200和800之间时，才应用边距

@media (min-width:800px) and (max-width: 1200px) {
  #photos img:nth-child(5n) { margin: 0 0 2.5% 0; }
}