CSS тег @media screen не читается, что делать?

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

Пожалуйста найдите ошибку в этом коде, помогите. Нигде не могу найти ответ