Screen suitability is not doing its function "@media screen and () {}"

The screen suitability is not responding to the defined attributes, apparently it seems right, but the width and height of the object when the browser screen is reduced in (max-width:400px) has no effect, something so simple and I could not solve , what could be going wrong ??

*{ padding:0px; margin:;}
.bl{ background-color:#F33; 
border:2px solid #000; 
margin:150px auto; 
position:relative; 
width:600px; 
height:300px;
}
@media screen and(max-width:400px){
	.bl{ width:200px; height:200px;}
}

<div class="bl"></div>