Не получается сделать адаптивную верстку для мобильных устройств
Не получается создать адаптивную верстку для мобильных устройств. Пишу точно также как и в уроке, но header все равно обрезается наполовину. Также не применяются стили для верстки. Прилагаю код того и другого:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>КиноМонстр - это портал о кино</title>
<meta name="description" content="Киномонстр - это портал о кино" />
<meta name="keywords" content="фильмы, фильмы онлайн, hd" />
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
@media only screen
and (min-device-width: 320px)
and(max-device-width: 568px){
.header{
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;
}
}