Почему при уменьшении окна браузера @media не меняет размер блока и цвета текстов?

.container {width: 300px; height: 300px; background: red;} 
.firstCase { color: green;  } 
.secondCase { color: red;    } 
 
@media screen and (max-width: 768px) { 
.container {height:100px; width: 100px; background: red;} 
.firstCase { color: red;  } 
.secondCase { color: green;} 
}

<div class="container"></div> 
 
<p class="firstCase">max-width:940</p> 
<p class="firstCase">square = 300x300</p><br><br> 
 
<p class="secondCase">max-width:500</p> 
<p class="secondCase">square = 100x100</p><br>