Html 使用媒体查询隐藏最大宽度为480px后的汉堡菜单图像的最简单方法是什么？

我的汉堡包菜单不会出现在使用媒体查询的响应版面中

.burger-nav{
  display: none;
}

@media screen and (max-width: 480px){
  .burger-nav{
    display: block;
    position: absolute;
    left: 95%;
    top: 16px;
  }
}

只有当我将它添加到我的主CSS中时，它才会出现，这与汉堡包菜单的目的背道而驰——仅当我的视口宽度小于等于480px时才会出现

<nav class="navbar">

        <ul>
          <li><a href="index.html">HOME</a></li>
          <li><a href="#">CASINO</a></li>
          <li><a href="#">HOTEL</a></li>
          <li><a href="#">ENTERTAINMENT</a></li>
          <li><a href="#">EVENTS</a></li>
          <li><a href="#">MEMBERS</a></li>
          <li><a href="#">JOIN</a></li>
        </ul>

      </nav>

      <img class="burger-nav" src="./images/burger-nav.png" />

/* .burger-nav{
  position: absolute;
  left: 95%;
  top: 16px;
} */

这是我的媒体查询

.burger-nav{
  display: none;
}

@media screen and (max-width: 480px){
  .burger-nav{
    display: block;
    position: absolute;
    left: 95%;
    top: 16px;
  }
}

---

如何使我的汉堡包菜单图像仅在视口宽度为480px或更小时才显示。

我很想帮助您，但我已经花时间回答了另一个问题，您甚至从未回答过？这个问题：//我的代码片段有用吗，或者在实现它时需要更多的解释吗？干杯你给我们看的代码没有问题。请创建一个链接，以便我们能够看到您遇到的问题并提供帮助。如果您查看我的github链接到我的网站，则无论是否将burger导航图像添加到我的媒体查询中，burger导航图像都不会显示：@FluffyKittenca您可以查看我的github链接到我的网站吗？如果您查看我的媒体查询和主css代码（与上面的代码相同，汉堡导航在480px或更低的响应图像应该可以正常工作），但它没有：@LaurentC堆栈溢出不是这样工作的：）问题本身必须包括显示问题所需的最小相关代码量。随着时间的推移，外部链接可能会发生变化或中断，因此，一旦你修复了网站，问题就不再存在，对其他用户来说，这个问题也不再有任何价值。请参见如何创建