display：none;在媒体查询CSS3中使用时，不会隐藏元素

Question

这是标记的样子：

<aside>
    <div class="widget">
      <div class="widget-title">
        <h4>General Info:</h4>
      </div>

      <div class="widget-body">
        <p><?php echo $name; ?></p>
        <p><?php echo $age; ?></p>
      </div>
</aside>

这是正常风格的样子：

aside {
    float: left;
    width: 20%;
    background-color: #9D9D9D;
    border-top: 1px solid #000;
}

以下是媒体查询样式：

@media (max-width: 610px) {
  aside {
    display: none;
  }
}

我知道我的语法是正确的，因为当我使用时：

@media (max-width: 610px) {
  aside {
     background-color: red;
  }
}

重新缩放时变为红色。 但是当我使用display：none;

时，它不会消失