Почему не работает @media only screen?

Прохожу урок по адаптивной верстке. Там используется @media only screen. Код написал точно также как и в уроке, но в хроме, в инструментах разработчика, при выборе мобильных девайсов ничего не работает. Пробовал хром, оперу и мозиллу - нигде не работает

/* CSS Mobile */
 @media only screen and (min-device-widht : 320px) and (max-device-widht : 568px) {
     .header {
         background-color: #257965;
         min-width: 100%;
         height: 20%;
         text-align: center;
    }
     .logo{
         width: 100%;
    }
     .site_content {
         width: 100% 
    }
     .menubar {
         width: 100%;
         height: 100%;
    }
     .site_content {
         width: 100%;
         text-align: center;
    }
     .sitebar_container {
         display: none;
    }
     .footer {
         display: none;
    }
     ul.menu {
         float: none;
    }
     ul.menu li {
         margin: 0;
         padding: 0;
         float: none;
    }
     .logo h1 {
         font: normal 235% 'century gothic', arial, sans-serif;
    }
     .logo h2 {
         font: normal 100% 'century gothic', arial, sans-serif;
         color: white;
    }
}

Искал ошибки в коде, ничего не нашел,