HTML / CSS | Задание 40 из 65
Привет знающим,в задание мы делаем блок входа на правой панели но происходит какая то колебарда с стилями и блок поиска в себя всасывает блок входа прикреплю код
HTML
<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_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 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>
CSS
*{
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 gray;
}
h1,h2{
font:normal 170% "century gothic",arial;
margin:0 0 15px 0;
padding:15px 0 5px 0;
color:#000;
}
h2{
font-size:140%;
}
.header{
background-color: red;
height: 300px;
font-size:0.8;
margin-left:0;
margin-right:0;
min-width: 900px;
}
.main,.logo,.menubar,.site_content,.footer{
margin-left: auto;
margin-right: 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:black;
letter-spacing:0.1em;
text-decoration: none;
}
.logo_text h2{
font-size:0.9em;
padding: 4px 0 0 0;
color:rgb(78, 224, 42);
}
.menubar{
width:900px;
height: 46px;
}
ul.menu{
float:rightt;
}
ul.menu li{
float:left;
padding: 0 0 0 9;
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: 19px 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 red;
border-radius: 5px;
background-color: #f9f9f9;
}
.btn{
padding: 8px;
background-color: white;
cursor: pointer;
}
.sidebar h2{
color:rgb(255, 0, 0);
}
