Html 媒体查询根本不起作用

我正在我的网站上创建一个用户信息显示，我希望它能够响应。我以前使用过媒体查询，从未遇到过任何问题。。。然而，我尝试的任何方法都没有奏效，包括将id更改为类和使用div布局（例如绝对、相对…）

这是我的css：

    #profile_container {
        position: relative; margin: 0 auto;
            top: 0px; left: 0px; width: 1400px; height: 180px;  overflow: hidden; 
            background: rgba(237,237,237,1);

             }

             /* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */

#profile_container {
        position: relative; margin: 0 auto;
            top: 0px; left: 0px; width: 300px; height: 100px;  overflow: hidden; 
            background: rgba(237,237,237,1);

             }
}

这是我的html和我的其他类。其他类不包含任何关于宽度的信息，只有文本属性

<div id="profile_container">
        <div class="profile_picture_large round_profile_pic_large">
        <img src="images/profiletest.jpg" />
        </div>
        <div class="profile_followers_rotate">24 <div class="profile_followers_rotate_small">followers!</div></div>

        <div class="welcome_text">Hello...</div>
        <div class="profile_name">Andy Rob Robinson</div>

24名追随者！
你好
安迪·罗布·罗宾逊

尝试使用Google Chrome并使用其开发工具。 要查看您的媒体查询，请将设备更改为iPhone 5，然后再更改为ipad 3-4。你应该看到他们的变化

如果希望在调整浏览器大小时看到它们发生更改，请使用

@media only screen 
and (min-width: 320px)
and (max-widht: 480px)

---

请检查您添加的css文件是否正确，它是否对我有效…另请注意。。。需要一个完美的结尾标签，就是这样！谢谢：）