Html 为什么我的媒体查询不适用于大分辨率？

我想编程一个网络，在PC中有3列，在智能手机中有一列。问题是我的媒体查询中的类“item”似乎不起作用。不知何故，即使我使用PC，主“项”也总是工作的，显示两列而不是三列。 这是HTML代码：

.container{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.项目{
左边距：32px；
右边距：32px；
边缘底部：32px；
宽度：311px；
高度：200px；
左：565px；
顶部：624px；
背景：C15D5D；
盒影：3px4x10pxRGBA（0,0,0,0.2）；
边界半径：20px；
}
.item.green{
背景色：#71B083；
}
.项目.黄色{
背景色：#D2BB68；
}
@介质（最小宽度：1281px）{
.项目{
边框样式：实心；
弹性：0.32%；
高度：100px；
利润底部：2%；
/* (100-32*3)/2 */
宽度：311px；
高度：200px；
左：565px；
顶部：624px；
背景：C15D5D；
盒影：3px4x10pxRGBA（0,0,0,0.2）；
边界半径：20px；
}
.item.green{
背景色：#71B083；
左：212px；
}
.项目.黄色{
背景色：#D2BB68；
左：918px；
}
}

1.
2.
3.
4.
5.
6.
7.
8.
9

元素的宽度为32%。每边的边距为32px

要使三个元素并排，您需要将192px的边距放入剩余空间的4%

---

要做到这一点，容器的内容宽度需要为4608px，因此窗口需要比1281px宽得多。

这是移动优先设计，因此媒体查询前的代码对手机非常有用（在手机中，我只需要一列）。如果我在移动类“item”的媒体查询中使用相同的代码，我可以看到三列。因此，媒体查询中的代码可以正常工作。Idk为什么媒体查询没有反应。