Медиа-запрос не работает, несмотря на проверку синтаксиса ⇐ CSS

[Anonymous]

Я узнаю о медиа-запросах и немного о том, почему этот медиа-запрос не работает. вот мой полный код, спасибо
Мой html:

Код: Выделить всё

Red Lorem, ipsum dolor
Orange
Yellow
Green
Blue
Indigo
Purple

Мой CSS:

Код: Выделить всё

 
.container {
color: white;
display: inline-flex ;
flex-direction: row;
border: 2px solid green;
flex: wrap;
flex:1;
font-size: 2rem;
}
@media  (min-wdith:600px){
.container{
flex-direction:column;
}

}

.container * {
flex-shrink: 1;
}

/*
Select all the elements that are the direct
children of the .container class.
*/

.red {background-color: #eb4d4b;}
.orange {background-color: #f0932b;}
.yellow {background-color: #f6e58d;}
.green {background-color: #6ab04c;}
.blue {background-color: #4834d4;}
.indigo {background-color: #30336b;}
.purple {background-color: #be2edd;}

Я следовал инструкциям и убедился, что мой синтаксис правильный. Я ожидаю, что когда я сжимаю и расширяю экран на VS, мои элементы будут переходить от гибкой строки к гибкому столбцу за минуту. шириной 600 пикселей

Подробнее здесь: https://stackoverflow.com/questions/785 ... ing-syntax