Саид Шукуров

Тут главный вопрос не в том почему синий цвет игнорируется, а почему ты задаешь Title (название страницы в браузере) синий фон

Просто меняем Background про hover

.btn{
background-color:black;
color:white;
}
.btn:hover{
background-color:white;
color:black;
}

Здравствуйте, это не так страшно как вам показалось
Это все делается очень просто, а то есть:
допустим вот такой код:

<div class="main">
    <div class="dont__main">
      <div class="div__for__img">
         <img src="путь">
           <img src="путь">
          <img src="путь">
           <img src="путь">
            <img src="путь">
             <img src="путь">
       </div>
    </div>
</div>

Так вот, в таком случае как видите у нас 6 изображений, и тут для адаптива к нам на помощь приходит Flexbox
Мы просто задаем

.dont__main{
display:flex;
flex-wrap:wrap;
}

А остальное, как вы написали про меню и табы, это делается через медиа запросы, к примеру:

<p class="no__mobile">text for decstop, dont show on mobile</p>
<p class="no__pc">text for mobile, dont show on pc </p>

Делаем так:

@media screen and (max-width:767px){
.no__mobile{
display:none; /*и на мобилах текста нету!*/
}
}
/*убираем на пк*/
@media screen and (min-width:999px){
.no__pc{
display:none;/*Пк прощается с текстом*/
}
}
/*Это всего лишь пример того как вы можете сверстать эти секции*/

И все :)
Если вам интересна технология Flexbox то вот вам Шпаргалочка

Здравствуйте, можно было бы скинуть и CSS код, но ладно, а вообще это все делается через Медиа запросы, я так вижу вы это и так знаете но их нужно и правильно прописывать
media (min-width:767px) and (max-width:767){
.img__for__decstop{
display:none;
}
}

Здравствуйте для этого думаю вы и сами знаете что такое медиа запросы
Так вот, вы уже думаю задали классы для всех блоков(включая Date)
Обратитесь к ним либо в файле style.css вашей темы
Либо в каком нибудь плагине для добавления кастомного кода
И просто запишите в медиа запросе max-width: 100%;