HTML / CSS更改下拉导航到标题右上角的菜单

Question

我正在尝试使用媒体查询，以便在 500px 以上我的导航仅显示为右上角标题部分菜单类中的 3 个项目（无背景）。

汉堡导航在 500px 以下运行良好，但在它上方卡在页面左侧，它不会内联显示，甚至不会改变背景颜色。

有什么建议吗？

实时页面托管在此处。 回购就在这里。

Answer 1

/* Explicitly add the particular section of code outside media query */
div#nav{
   background-color : #dddddd;
   width : 100%;
  }
  div#nav *{ 
   display : inline-block;
  }
 
@media (min-width: 1000px) {
 div#nav{
   background-color : #dddddd;
   width : 100%;
  }
  div#nav *{ 
   display : inline-block;
  }
 }

<div id="nav">
      
          <nav class="dropdown-content">
              <a href="#" class="menu">Why Clarity</a>
              <p class="divider"> | </p>
              <a href="#" class="menu">Benefits</a>
              <p class="divider"> | </p>
              <a href="#" class="menu">Diversity</a>
          </nav>
</div>