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

Question

The screen fit is not responding to the defined attributes, it seems to be right, but the width and height of the object when the browser screen is reduced in (max-width:400px) it has no effect, something so simple and I could not solve, what may 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>

Answer 1

Dude your problem is with this and( the word cannot be stuck in the (

It has to be like this with space

@media screen and (max-width:400px)