媒体查询无效

Question

我的主题体宽有限。需要一个全屏标题元素。所以，我已经设置了2个div。一个宽度为140％，另一个为实际标题。随着宽度的变化，包含标题元素的高度也会变化。所以，我需要背景div来改变它。但媒体查询由于某种原因无法发挥作用。

这是html

 <div id="topcontainer2">
 </div>    
 <div id="topcontainer"></div>

topcontainer是包含所有元素的div，topcontainer2是背景div

CSS

#topcontainer {
top:0;
left:0;
width:100%;
min-height:56px;
background-color:#D8D8D8 !important;
border-bottom: 2px solid #BCBCBD;
z-index:22 !important;
color:black;
}

#topcontainer2 {
width:140%;
min-height:56px;
margin-left:-20%;
position:absolute;
overflow-x: hidden;
background-color:#D8D8D8 !important;
border-bottom: 2px solid #BCBCBD;
z-index:-1;
}

@media only screen and (min-width:1012px) and (max-width:1278px;){
#topcontainer2 {
min-height:98px !important;
}
}