html、cssでレスポンシブデザインを作成しているのですが、効いてくれません。

Question

html、cssでレスポンシブデザインを作成しているのですが、効いてくれません。

該当のソースコード

<section>
            <h2>Portfolio</h2>
            <ul id="gallery">
                <li>
                    <a href="g1.jpg">
                        <img src="g1.jpg" alt="">
                        <p>Pink bubble.</p>
                    </a>
                </li>
                <li>
                    <a href="g2.jpg">
                        <img src="g2.jpg" alt="">
                        <p>Green bubble.</p>
                    </a>
                </li>
                <li>
                    <a href="g3.jpg">
                        <img src="g3.jpg" alt="">
                        <p>Blue bubble.</p>
                    </a>
                </li>
                <li>
                    <a href="g4.jpg">
                        <img src="g4.jpg" alt="">
                        <p>red bubble.</p>
                    </a>
                </li>
            </ul>
        </section>

/*********************************
  Section
**********************************/

section {
    padding: 30px 26px;
}

section h2 {
    padding: 10px 0 20px 0;
    text-align: center;
    letter-spacing: 0.15em;
}


#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

@media screen and (max-width: 480px){
    #gallery li {
        width: 90%;
        margin: 5%;
    }
}

#gallery li {
    float: left;
    width: 44%;
    margin: 3%;
    background-color: #f6f6f6;
}

#gallery li a {
    display: block;
    overflow: hidden;
}

#gallery li a:hover {
    margin: -3px;
    border: 3px solid #2290bf;
}

#gallery li a p {
    margin: 0;
    padding: 10px;
    color: #666;
    text-align: center;
}

ググって調べて、viewportを明記忘れてないか？や
content="width=device-widthも initial-scale=1.0"も明記忘れてないか？など確認してスペルミスもないか？などもチェックしましたが、再度リロードしても効いてくれません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

「効いてくれません」とのことですが、具体的には何が起きていますか？

[nmamaworker]

画面がmax-width: 480pxになったら、gallery liが、1カラムになって欲しいので、
#gallery li {
width: 90%;
margin: 5%;
}
とcssで表記したのですが、なってくれなくてなぜだろう？と思っております。。恐れ入ります。。

Answer 1

@mediaを含むCSSは、同じセレクタで@mediaなしのものより後に書いてください。

@mediaがあってもなくても、CSSの詳細度は同じですので、「@mediaあり→@mediaなし」の順で書いていると、メディアクエリが一致したとしても後から書いた@mediaなしのほうが優先されてしまいます。