Нечего не меняется в стиле кнопки, что делать?

.btn {

padding: 8px;
background-color: blue;
cursor: pointer;
}

html

css

5 ответов

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="assets/css/style.css">

</head>
<body class="colorAll">

<div class="header">
<div class="main">
<div class="logo">
<div class="text_logo">
<h1> <a href="/"> <strong>My Films</strong> </a> </h1>
<h2> New films in this channel</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>

<div class="site_content">

<div class="sitebar_container">

<div class="sitebar">

<h2>Поиск</h2>
<form method="post" action="#" id="search_form">
<input type="search" name="search_field" placeholder="ваш запрос"/>
<input type="submit" name="btn" value="найти"/>

</form>

</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,textare {
outline: none;
border: none;
border: solid 1px #f2f2f2;
}

.colorAll {
background-color: #0a0a0a;

}

.header {

background-color: black;
height: 200px;
padding-top: 10px;
}
.text_logo h1 {


margin-left: 90px;
margin-top: 40px;
font: normal 300% "century gothic",arial,sans-serif;
letter-spacing: 0.3em;
color: #ffffff;


}
.text_logo h2 {


margin-left: 90px;
font: normal 80% "century gothic",arial,sans-serif;
letter-spacing: 0.47em;
color: #ffffff;

}

.text_logo h1 a {

text-decoration: none;
color: #ffffff;
}


.menuBar {

width: 1420px;
height: 46px;
margin-top: 25px;

}

ul.menu {

float: right;
letter-spacing: 0.2em;
}

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: #b3b3b3;
}
ul.menu li a:hover {
color: #edc534;
}

.site_content {
width: 250px;
overflow:hidden;
margin: 20px auto 0 auto;
background-color: #0a0a0a;

}

.sitebar_container {
float: right;
width: 220px;
}
.sitebar {
float: right;
width: 222px;
padding: 5%;
margin: 0 0 16px 0;
border: solid 1px #404040;
border-radius: 5px;
background-color: #404040;
}

.btn {

padding: 8px;
background-color: blue;
cursor: pointer;
}

спасибо

Весь код покажите html и css

1. У вас вложенность блоков div перепутана, например:

 <div class="header">
        <div class="main">

div с классом main должен быть главным div и в него должны входить остальные блоки.

2. Textarea с опечаткой написана:

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

3. Лучше используйте названия классов как в уроках, а не такие menuBar

Вот здесь посмотрите живой пример как должно быть (кнопка "Показать ответ" справа сверху):

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