HTML/CSSを変更して、ヘッダーの右上にあるメニューに移動します

Question

メディアクエリを使用しようとしていますので、上記の500pxのナビゲーションは、右上のヘッダーセクションのメニュークラスの3項目として表示されます）。

ハンバーガーナビは500px未満で完全に動作していますが、ページの左側にスタックしているため、インラインで表示されず、背景色も変更されません。

アドバイスはありますか？

ライブページはhereです。レポはhereです。

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>