Media queries 什么是覆盖媒体查询？

我正在练习css网格和媒体查询。当我添加最大宽度768px的媒体查询时，当我将屏幕缩小到该大小时，什么也不会发生，我仍然看到4列，而不是我试图应用的2列

我正在使用VisualStudio代码和live服务器。我已经尝试在Finder中直接打开html（我使用的是mac os），我已经刷新了页面，但仍然存在相同的问题

当我的屏幕尺寸低于768px，并且当我检查文件时，我看到下面这些消息时，有东西覆盖了媒体查询。我如何解决这个问题，或者我做错了什么

非常感谢您的帮助

正文{
背景：绿色；
}
.电网{
显示：网格；
网格模板列：重复（4，自动）；
网格间距：1rem；
}
@介质（最大宽度：768px）{
.电网{
显示：网格；
网格模板列：重复（2，自动）；
}
}

标题1
洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。腐败的罪魁祸首是腐败的官员。面部同侧壁去顶分子，无需保留，仅限于理性

标题2
洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。腐败的罪魁祸首是腐败的官员。面部同侧壁去顶分子，无需保留，仅限于理性

标题3
洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。腐败的罪魁祸首是腐败的官员。面部同侧壁去顶分子，无需保留，仅限于理性

品目X
洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。腐败的罪魁祸首是腐败的官员。面部同侧壁去顶分子，无需保留，仅限于理性

单词repeat和开头括号之间有一个空格。去掉那个，一切都会好起来的

---

黄色警告三角形表明该行有问题。

不看CSS怎么能这么说？@ShivamJha我刚刚添加了一个类似1-2分钟前的片段？我确实看到了！这并不是重写，只是说你的代码不正确——很高兴它工作了——知道空格什么时候重要可能会让人困惑，因为它们通常不重要。这是真的！我花了这么多时间尝试不同的解决方案，我向你保证我永远不会忘记这个空间的重要性哈哈