css - 忽略媒体查询，遵循 MDN 指南

Question

我对此感到非常沮丧......

MDN 示例媒体查询:

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

我的媒体查询:

@media (max-width: 1000px) {
  .nav-content {
    width: 90%;
    margin-left: 5%;
  }
}

它不工作...

我检查过的东西:

• 查询在原始 .nav-content 声明之后
• 类(class)是正确的名字
• 拼写正确

原始 CSS

.nav-content {
  width: 80%;
  margin-left: 10%;
  display: inline-block;
}

这是代码笔的链接:http://codepen.io/sbhenrichs/pen/ZOjyrm但是当我将浏览器缩小到小于 1000 像素时，什么也没有发生!

请帮忙

Answer 1

您在 (HTML) head 内的 style 标记中有此 CSS 规则:

.nav-content {
  width: 75%;
  margin-left: 12.5%;
}

这会覆盖所有外部样式表中的规则...