html - display: none; won't hide the element when used in media query CSS3 -

here's markup looks like:

<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> 

this normal style looks like:

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

and here media query style looks like:

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

i know syntax right because when use:

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

it turns red when rescale. won't go away when use display: none;