The ul list does not reduce its margin value even when I declare in the @media section.

Code:
<div id="featured" class="grid col-920">
        
        <div class="grid col-460">

            <h1 class="featured-title">My Daily Schedule</h1>                    
            <h2 class="featured-subtitle"></h2> 
            <ul class="mid">            
            <li> walk and feed the dog</li> 
            <li> take out trash  </li>  
            <li>go to school </li>   
            </ul>
Code:
#featured ul.mid {
list-style:square;	
float:left;
margin-left: 120px;
position:relative;
}

/* smaller devices below */

 #featured ul.mid {
    list-style:square;	
    float:left;	 
     margin-left: 5px!important;
    }    

#widgets  {width: 766px;
   }
	
}


@media and (min-width: 481px) and (max-width: 650px) {

  #featured ul.mid {
      display:none;
    }

 #widgets {display:none;}
	
}