Верстка для мобильных устройств

Здравствуйте!!! Что не так с кодом, почему не получается стилизировать сайт для моб. устройств 

/* CSS mobile */

@media only screen
and (min-device-width : 320px)
and (max-divice-width : 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;
}

.sidebar_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;
}

Cкрин того, что ничего не меняется 

https://skr.sh/i/240821/lwENQrSG.jpg?download=1&name=Скриншот%2024-08-2021%2014:21:19.jpg (https://skr.sh/s9hlwENQrSG?a)