メディアクエリスタイルがオリジナルスタイルをオーバーライドしない件

質問

私が構築しているウェブサイトで、いくつかのメディアクエリを使用しようとしています。しかし、私が抱えている問題は、メディアクエリのスタイルが実際に適用されている間、それらが上書きされていることです。同じセレクタを使用しているため、その理由がわかりません。誰か私が見ていない何かを指摘することができますか？

元のCSS

#global-wrapper-outer > #global-wrapper-inner {
    width: 85%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}
    #global-wrapper-outer > #global-wrapper-inner > nav {
        background: #fff;
        padding-bottom: 20px;
        box-shadow: 0 4px 2px -2px gray;
    }

メディアクエリCSS

@media screen and (max-width:1024px) {
    #global-wrapper-outer > #global-wrapper-inner {
        width: 100%;
    }
    #global-wrapper-outer > #global-wrapper-inner > nav {
        display: none;
    }
}

2つ目のメディアクエリは、ナビの表示をnoneに設定したところ、問題なく動作しています。しかし、#global-wrapper-innerの幅を100%に設定しようとすると、適用されません。F12キーを押してその要素を選択すると、スタイルが"applied"されるのが見えます。しかし、スタイルそのものがクロスしてしまい 実際に が適用されておらず、元の幅である 85% のままです。

どのように解決するのですか？

元のCSSのセレクタが、同じ の特異性 であり、メディアクエリ内のセレクタと同じです (最初の宣言も同じプロパティを対象としています。 width と表示され、メディアクエリルールセットがオーバーライドされているので の前に の前に表示されると仮定します。

2番目のメディアクエリセレクタは、元のCSSで設定されていないプロパティを対象としているため機能し、特異性は重要ではありません。

最初のメディアクエリセレクタを優先させるには、祖先要素を前置する。

@media screen and (max-width:1024px) {
    body #global-wrapper-outer > #global-wrapper-inner {
         width: 100%;
    }
    #global-wrapper-outer > #global-wrapper-inner > nav {
        display: none;
    }
}