Sidebar Поиск при увелечении экрана уезжает вправо,как его зафиксировать?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>КиноМонстр</title>
<meta name="description" content="КиноМонстр - это сайт о кино"/>
<meta name="keywords" content="Фильмы, hd, фильмы онлайн"/>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600i,700,800" rel="stylesheet">
</head>
<body>
<main>
<div class="header">
<div class="logo">
<div class="logo_text">
<a href="index.html"><h1>КиноМонстр</h1></a>
<h2>Кино - наша страсть!</h2>
</div>
</div>
<div class="menubar">
<ul class="menu">
<li class="selected"><a href="index.html">Главная</a></li>
<li><a href="#">Фильмы</a></li>
<li><a href="#">Сериалы</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
</div>
<div class="site_content">
<div class="sidebar_container">
<div class="sidebar">
<h2>Поиск</h2>
<form method="post" action="#" id="search_form">
<input type="search" name="search_field" placeholder="Введите запрос">
<input type="submit" class="btn" value="Найти">
</form>
</div>
</div>
</div>
</main>
</body>
</html>
* {
margin: 0;
padding: 0;
}
/*Стили для Хэдера-начало*/
.header {
min-width: 1200px;
height: 150px;
background-color: darkslateblue;
}
.logo {
width: 870px;
}
.logo_text {
text-align: center;
}
.logo_text a {
text-decoration: none;
}
.logo h1, h2 {
font: normal 220% 'open sans', sans-serif;
letter-spacing: 0.3em;
}
.logo h1 {
color: white;
}
.logo h2 {
color: #D3D3D3;
font-size: 0.9em;
padding-right: 85px;
}
.menubar {
width: 1000px;
margin-top: 50px;
}
ul.menu {
text-align: right;
}
ul.menu li {
display: inline;
list-style: none;
padding-left: 60px;
}
ul.menu li a {
text-decoration: none;
color: #F5F5F5;
font: normal 100% 'open sans', sans-serif;
}
ul.menu li a:hover {
color: #98FB98;
}
ul.menu li.selected a {
color: #32CD32;
}
/*Стили для Хэдера-конец*/
.site_content {
width: 1000px;
overflow: hidden;
margin: 20px auto 5px auto;
}
.sidebar_container {
float: right;
width: 225px;
}
.sidebar {
float: right;
width: 220px;
border: 1px solid #f2f2f2;
padding: 5%;
margin: 10px 0 0 0;
border-radius: 5px;
background-color: #f7f7f7;
}
Простой
Средний