Html @media选择器有问题吗？

我正在为我将要制作的网站使用一个标题，我正在尝试使用CSS媒体选择器来改变在手机上查看标题的方式

以下是我正在尝试做的一些事情：

及

代码如下：

html:

我希望手机上的棕色框消失，只留下img作为标题，但是，我还无法让样式选择器真正正常工作。有什么提示或评论让我知道我做错了什么吗

---

非常感谢

在您需要使用“屏幕最大宽度”检测屏幕大小之前，已询问此问题您是否设置了视口？

<img src="http://lifetimefoundation.adoptsites.wpengine.com/wp-content/uploads/sites/3/2014/10/LifetimeLogolong.png" alt="LifetimeFoundation" width="311" height="122" class="header-img" align="left" style="margin-right: 10px;"/>
<div class="header" style="background-color:#6b3f24; height:122px; width:960px;" align="center">
<div class="header-text" style="padding-top: 10px; text-align: left;">
    <h1>BUILDING FAMILIES AND FUTURES</h1>
    <h5>Through Adoption Grants and Educational Scholarships</h5>
</div>
</div>

h1 {
    font-family: Garamond;
    font-size: 200%;
    color: #FFFFFF;
    margin: 0px;
}
h5 {
font-family: Garamond;
    font-size: 100%;
    color: #D9825F;
    margin: 0px;
}
@media handheld {
    .header {
        display:none;
    }
}