Почему происходит неверное отображение сайта на мобильных устройствах?

Почему при введение стиля:

@media only screen
and (min-device-width :320px)
and(max-device-width :568px){
.header{
background-color: #aeb002;
}
}

не происходит изменения при проверки сайта на мобильных устройствах через инструменты разработчика в Google Chrome

А так же при использование тега:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

разрешение сайта наоборот ломается и становится не верным, возможно ли что, на сегодняшний день  в браузер предусмотрена автоматическое изменение отображение сайтов?

Сам проект:

https://yadi.sk/d/4FcU0cSijes36w