Css 媒体查询样式被默认样式覆盖

我正在使用CSS媒体查询创建一个响应页面。我可以在Chrome的开发者工具中看到媒体查询正在工作，但是，它们并没有覆盖我的默认样式。例如，以以下样式为例：

#hero .text {
  margin: 150px;
}

@media all (max-width: 1024px) and (min-width: 1px) {
  #hero .text {
    margin: 80px;
  }
}

在我的浏览器中，如果我调整到1024px宽，我可以看到上面所有的样式都被请求了，但最终使用的是默认样式（边距为150px）

---

知道我做错了什么吗？改变这个

@media all (max-width: 1024px) and (min-width: 1px) {
  #hero .text {
    margin: 80px;
  }
}

至

 @media screen and (max-width: 1024px) {
      #hero .text {
        margin: 80px;
      }
    }

及

下面这个

.text { /*removed #test */
  margin: 150px;
}

---

@安德鲁：你从哪个分辨率调整它1024px@Andrew现在检查@安德鲁：一个是最大宽度，另一个是最小宽度-width@Andrew当前位置我想现在我的答案将非常适合你。。！！这需要我在媒体查询中包装整个样式表。只在保证金价值上使用“！important”会更有效。

.text { /*removed #test */
  margin: 150px;
}