display: noneが効かない。

Question

メディアクエリでスマホサイズ以下の時に、ナビのメニュー（nav ul）をハンバーガーに変えたいので消したいのですが、display:noneが効きません。何が原因でしょうか。
.burger-unshownに対しては効いています。

　　　　　<nav>
          <h1><a href=""><span>KEI</span><span> NISHIKORI</span><span>.COM</span></a></h1>
          <ul>
            <li><a href="">ブログ</a></li>
            <li><a href="">試合結果</a></li>
            <li><a href="">公式アプリ</a></li>
          </ul>
          <div id="burger">
            <input id="burger-input" type="checkbox" class="burger-unshown">
            <lavel id="burger-open" for="burger-input"><span></span><span></span><span></span></lavel>
            <label id="burger-close" class="burger-unshown" for="burger-input"></label>
            <div id="burger-content">
              ブログ
              試合結果
              公式アプリ
            </div>
          </div>
        </nav>

@media screen and (max-width: 480px) {
  .nav ul {
    display: none;
  }
}

Answer 1

.navではclass="nav"を意味するセレクタになってしまうため要素セレクタに直しましょう

nav ul {
  display: none;
}

Answer 2

.navは」、クラスへの指定になります。<nav>要素に適用するCSSは、navとだけ書いてください。