The styles for the buttons on the site do not work.

 @import url('https://fonts.googleapis.com/css?family=Saira+Condensed'); * { margin: 0; padding: 0; } body { width: 100%; height: 100%; } a { color: #fa713e; text-decoration: none; transition: all.6s ease; } a:hover { color: #c34f34; text-decoration: none; transition: all.6s ease; } img { max-height: 100%; height: auto; width: auto\9; transition: all 3s ease-out; } hr { display: black; height: 1px; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } header { float: left; background-color: #316ac6; width: 99.4%; padding: 0.3%; border-bottom: 5px solid #5580c6; } header>div#logo>a>img { width: 50px; height: 50px; float: left; } header>div#logo>a { color: white; } header>div#logo>a>span { font-size: 2.5em; margin-left: 10px; font-family: 'Saira Condensed', sans-serif; } #about { text-align: center; font-family: 'Rammetto One', cursive; font-size: 1.4em; padding-top: 10px; } #about>a { color: white; } #about>a:hover { color: #dfdfdf; border-bottom: 1px solid silver; } #about>a:last-child { margin-left: 10%; } #reg_auth>a { color: white; } #reg_auth>a>div.btn { border-bottom: 2px solid rgba(217, 91, 72, 1); margin-top: 7px; } #reg_auth>a>div.btn { border-bottom: 0; margin-top: 9px; } #reg_auth>a>div.btn { float: right; margin-right: 3%; margin-top: 5px; border-radius: 5px; padding: 5px 9px; font-size: 1.2em; background-color: rgba(236, 101, 80, 1); text-shadow: #454545 0 0 2px; } /*==================================*/ /*@media (max-width: 524px)*/ @media (max-width: 524px) { header { background: red; } header>div#logo>a>img { margin-left: 5%; } #logo { width: 100%; } /* тут у тебя пропадают кнопки потому что*/ /* строка ниже display: none; */ #about { visibility: hidden; display: none; } #reg_auth { visibility: hidden; display: none; } } /*@media (max-width: 524px)*/ /*==================================*/ /*++++++++++++++++++++++++++++++++++*/ /*==================================*/ /*@media (max-width: 935px) and (min-width: 525px)*/ @media (max-width: 935px) and (min-width: 525px) { header { background: green; } header>div#logo>a>img { margin-left: 15%; } #logo { float: left; width: 50%; } #about { visibility: hidden; display: none; } #reg_auth { float: right; width: 50%; } } /*@media (max-width: 935px) and (min-width: 525px)*/ /*==================================*/ /*++++++++++++++++++++++++++++++++++*/ /*==================================*/ /* а тут как я понял ты несколько не правильно медиа запрос оформил*/ /* было @media (min-width: 936px) {*/ /* стало @media (max-width: 1236px) and ( min-width: 936px)*/ /*это для примера (max-width: 1236px) and*/ /* а в медиа уже пропиши те стили которые тебе нужны*/ @media (max-width: 1236px) and ( min-width: 936px) { header { background: orange; } header>div#logo>a>img { margin-left: 2%; } #logo { float: left; width: 30%; } #about { float: left; width: 30%; } #reg_auth { float: right; width: 30%; } } /*@media (min-width: 936px)*/ /*==================================*/ 

 <header> <div id="logo"> <a href="index.html" title="Главная страница"> <img src="https://pp.userapi.com/c628028/v628028911/1884a/0osNxl4Lxao.jpg" alt="Главная страница" /> <span>Wolksvagen</span> </a> </div> <div id="about"> <a href="" title="Узнать больше о Wolksvagen">Реклама</a> <a href="" title="Обратная связь">Обратная связь</a> </div> <div id="reg_auth"> <a href="" title="Личная страница"> <!-- <div id="btn"> У тебя id btn --> <!-- а в css class btn #reg_auth>a>div.btn { --> <!-- изменил строку ниже id на class --> <div class="btn"> Вход </div> </a> <a href="" title="Регистрация"> <!-- изменил строку ниже id на class --> <div class="btn"> Регистрация </div> </a> </div> </header>