Не работает класс sidebar, как исправить?

Первый класс работает, а второй class="sidebar" не работает , смотрите скрины ?

Проблема в том , что первый <div class="sidebar"> становится на своё место , а второй нет . Лучше скопировать код и самому посмотреть наглядно

Помогите пожалуйста!

Заранее Спасибо

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Киномонстр</title>
	<meta name="description" content="Киномонстр - это портал о кино ">
	<meta name="keywords" content="фильмы , фильмы онлайн , hd">
	<link rel="stylesheet" href="bear.css">
</head>
<body>
	
	<div class="main">		
		<div class="header">			
			<div class="logo">				
				<div class="logo_text">
					<h1><a href="/">КиноМонстр</a></h1>
					<h2>Кино-наша страсть!</h2>
				</div>
			</div>

				<div class="menubar">
					<ul class="menu">
						<li class="selected"><a href="#">Главная</a></li>
						<li><a href="#">Фильмы</a></li>
						<li><a href="#">Сериалы</a></li>
						<li><a href="#">Рейтинги</a></li>
						<li><a href="#">Контакты </a></li>
					</ul>

				</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 class="sidebar">
							<h2>Вход</h2>
							<form method="post" action="#" id="login" >
								
								<input type="text" name="login_field" placeholder="Логин">
								<input type="password" name="password_field" placeholder="Пароль">
								<input type="submit" class="btn" value="Вход">

							</form>


						</div> 

					</div>


				</div>

		</div>

	</div>

</body>
</html>

*{
	margin: 0;
	padding: 0;
}	 

input[type="text"], input[type="password"], input[type="search"] {
	color: #5d5d5d;
	width: 60%;
	padding: 8px;
}

input, textarea{
	outline: none;
	border: none;
	border: solid 1px #f2f2f2;
}

h1, h2 {
	font: normal 170% 'century gothic' , arial ;
	margin: 0 0 15px 0 ;
	padding: 15px 0 5px 0;
	color: #000;
}

h2{
	font-size: 150%;
}

.header{
	background-color: #8C00FF;
	height: 177px;
	font-size: 0.8em;
	margin-right: 0px;
	margin-left: 0px;
	min-width: 900px;
}

.main , .manudar, .logo, .site_content, .footer {
	margin-right: auto;
	margin-left: auto;
}

.logo{
	width: 880px;
	padding-bottom: 40px;
}

.logo h1 , .logo h2{
	font: normal 300% "century gothic" , arial , sans-serif;
	margin: 0 0 0 9px;
}

.logo_text h1 , .logo_text h1 a, .logo_text h1 a:hover {
	padding: 22px 0 0 0;
	color: #fff;
	letter-spacing: 0.1em;
	text-decoration: none;
}

.logo_text h2 {
	font-size: 0.9em;
	padding: 4px 0 0 0;
	color: #999;
}

.menubar{
	width: 900px;
	height: 40px;
}

ul.menu{
	float: right;
}

ul.menu li {
	float: left;
	padding: 0 0 0 9px;
	list-style: none;
	margin: 1px 2px 0 0;
}

ul.menu li a{
	font: normal "trebuchet ms " sans-serif;
	display: block;
	height: 20px;
	padding: 6px 35px 5px 28px; 
	color: #fff;
	text-decoration: none;
}

ul.menu li.selected a {
	color: #aeb002;
}

ul.menu li a:hover{
	color: #e4ec04;
}

.site_content{
	width: 880px;
	overflow: hidden;
	margin: 20px auto 0 auto;
	background-color: white;
}

.sidebar {                                                             
	float: right;
	width: 222px;
	padding: 5%;
	margin: 0 0 16px 0;
	border: solid 1px #f2f2f2; 
	border-radius: 5%;
	background-color: #f9f9f9;
}

.btn{
	padding: 8px;
	background-color: white;
	cursor: pointer;
}

.sidebar h2 {
	color: #136cb2;
}

html

css

Не работает класс sidebar, как исправить?

0 ответов