Не могу исправить sidebar, где ошибка?

В Уроке 41 создание второй панели правого блока, после создания блока, тот в свою очередь занимет совсем не то место, которое должно было. проверял коды уже раз пять, где ошибки??? До этого была проблема с первым блоком- тот в свою очередь отказывался перезжать правую колонку.....

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="description" content="Киномонстр - это портал о но"/>
	<meta name="keywords" content="фильмы, фильмы онлайн, hd"/>
	<link rel="stylesheet" href="assets/css/style.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>
<div class="site_content">
  <div class="sidebar_conteiner">
  	<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" name="btn" value="Вход" />
  		</form>
  	</div>
  </div>
</div>
</div>	
		
</body>
</html>

html

css

3 ответов

Вот ошибки:

<div class="sidebar_conteiner">

Класс в html верстке называется sidebar_conteiner, но в css стилях называется sidebar_container. Стили не будут работать, потому что это разные названия классов:

.sidebar_container {

Ошибка 2:

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

input[type="passwod"] - в слове password не хватает буквы r. Типа passwod не существует и по этому не будет работать стили для input с типом password.

Ошибка 3:

<input type="submit" name="btn" value="Вход" />

Отсутствует класс для этого input class="btn".

Вот здесь можно посмотреть готовый пример, как должно быть:

https://fructcode.com/ru/courses/html-and-css/footer-interactive/

Приложу так же файл CSS .

* {
	margin:0;
	padding:0;
}

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

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

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

h2 {
	font-size: 140%;
}


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

.main, .logo, .menubar, .site_content, .fooder {
	margin-left: auto;
	margin-right: auto;
}

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

.logo h1, .logo h2 {
	font: norma 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: 46px;
 }

 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 100% '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_container {
	float: right;;
	width: 224px;
 }

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

 }

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

 }

 .sidebar h2 {
 	color: #136cb2;
 }

Мне кто-нибудь поможет?