媒体查询不生效

Question

我以前从未遇到过这样的媒体查询问题。通常，它只是做一些意想不到的事情，但不是什么都没有。我不需要实际效果的帮助，就像为什么它没有看到查询一样。如果您检查代码，它只是不存在。我引用了其他几篇文章，但就我所知，我的格式和语法一样。

这是我的 HTML：

<div id="content_main">
    <div id="bottom">
        <div id="discord">
            <div id="header_headset">
                <h1>See who's online:</h1>
                <div id="headset"></div>
            </div>
            <iframe src="https://discordapp.com/widget?id=90178023529127936&theme=dark" width="320" height="500" allowtransparency="true" frameborder="0"></iframe>
        </div>
        <div id="news_announcements">
            <h1>News and Announcements</h1>
            <p>First and formost, welcome to CommonRoomGaming.com. If you are new here, just find a game you have that you want to play with others, and just jump onto one of our servers! You can find detailed connection instructions on each games page.</p>
            <div id="News_Events">
                <ul>
                    <li>ECO Server Woes</li>
                    <li>New Server Incoming!</li>
                    <li>2/14/17 - Site Launched</li>
                </ul>
            </div>
        </div>
        <div id="S_A_G">
            <div id="sad_dragon"></div>
            <div id="sag_comments">
                <h2>Not playing your favorite game?</h2>
                <p>Here at CommonRoomGaming.com we don't discriminate against any games. If you want to play a game, odds are others have it and want to play it too! So with that said, if you don't see your favorite game listed, feel free to suggest it by letting us know in the below form.</p>
            </div>
            <div id="SAG_form">
            <FORM action="emailit.html" method="POST">
            <TABLE border="0" width="100%">
                <TR>
                    <TD>Your name and/or handle:</TD>
                </TR>
                <TR>
                    <TD>
                        <INPUT type="text" size="30" maxlength="40" name="name"></INPUT>
                    </TD>
                </TR>
                <TR>
                    <TD>Your email address:</TD>
                </TR>
                <TR>
                    <TD>
                        <INPUT type="text" size="30" maxlength="127" name="email"></INPUT>
                    </TD>
                </TR>
                <TR>
                    <TD>Your message:</TD>
                </TR>
                 <TR>
                <TD>
                    <TEXTAREA name="message" rows="4" cols="50" style="width:300px" ></TEXTAREA>
                </TD>
                </TR>
            </TABLE>
            <P>
                <INPUT type="submit" value="Make it so."></INPUT>
            </P>
            </FORM>
            </div>
        </div>
    </div>
</div>

这是我的媒体查询：

@media screen and (max-width:500px){
#bottom {
    width:350px;
    display:block;
    margin-right:auto;
    margin-left:auto;
}

}

这是我的整个文档的codepen link

同样，我只需要知道我在媒体查询中做错了什么。忽略任何不相关的东西，因为一切都在变化。

Answer 1

问题与 DNS 缓存有关。