Media Query not taking effect

Question

I have never had a problem with a media query like this before. Normally, it just does something unexpected, but not nothing. I don't need help with the actual effect, just as to why it isn't seeing the query. If you inspect the code, it is just not there. I referenced several other posts, but I have it formatted the same as far as I can tell, syntax wise.

Here is my 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>

And here is my media query:

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

}

Here is my codepen of the whole document link

Again, I only need to know what I am doing wrong with the media query. Ignore anything unrelated, as it is all changing.

Answer 1

Problem was related to DNS Caching.