Html 媒体查询不覆盖原始显示样式

我有一个移动菜单，设置为加载时不显示，然后在媒体上查询其设置为显示块

我过去一直这样做，但没有任何问题。然而，这是行不通的

在firefox inspector中查看时，我可以看到css媒体查询被标准css覆盖了。知道为什么吗

小提琴：

备份代码：

    <nav class="header-nav">
        <ul id="nav">
            <li><a href="#homepage-gallery" class="scroll">Gallery</a></li>
            <li><a href="#homepage-about" class="scroll">About</a></li>
            <li><a href="#homepage-contact" class="scroll">Contact</a></li>
            <li><a href="#homepage-loyalty" class="scroll">Loyalty Card</a></li>
        </ul>
    </nav>

    <div class="header-nav-mobile">
        Menu
    </div>

@media only screen 
and (min-width : 320px) 
and (max-width : 568px) {

.header-nav-mobile {
    display: block;
}

#nav {
    display: none;
}

}

.header-nav-mobile {
    float: right;
    line-height: 40px;
    width: 60px;
    height: 40px;
    text-align: center;
    color: #fff;
    background-color: #404040;
    cursor: pointer;
    display: none;
}

菜单
@仅媒体屏幕
和（最小宽度：320px）
和（最大宽度：568px）{
.头部导航移动{
显示：块；
}
#导航{
显示：无；
}
}
.头部导航移动{
浮动：对；
线高：40px；
宽度：60px；
高度：40px；
文本对齐：居中；
颜色：#fff；
背景色：#404040；
光标：指针；
显示：无；
}

尝试将媒体查询放在默认css代码下面，如下所示：

.header-nav-mobile {
    float: right;
    line-height: 40px;
    width: 60px;
    height: 40px;
    text-align: center;
    color: #fff;
    background-color: #404040;
    cursor: pointer;
    display: none;
}
@media only screen 
and (min-width : 320px) 
and (max-width : 568px) {
  .header-nav-mobile {
      display: block;
  }
  #nav {
      display: none;
  }
}

---

工作小提琴：

将@mediaquery放错位置，将其剪切并粘贴到底部。

应在默认状态后定义媒体查询。否则，它将被文件中稍后的默认状态覆盖。