Андрей Федоров

.content:hover > h1 {
    color: red;
}

в секции head у index.html вставьте следующее:

<style>
div.content {display: none !important}
</style>

Поддержка у браузеров отличается... Причем даже зависит от версии... Вот такие псевдоклассы попробуйте:

::-webkit-input-placeholder
::-moz-placeholder
:-moz-placeholder
:-ms-input-placeholder

ps: Относится к input, как будет c textarea не пробовал.

Не нужно картинку затенять. Дайте тексту тень - text-shadow: 0 0 5px rgba(0,0,0,.5);
С параметрами поиграйте.

Тут нужен js или php. Делаете цикл, рандомно вставляете инлайн-свойства ccs.

codepen.io/aliencash/pen/BoGMrJ

body {
  background-image: linear-gradient(90deg, #f00 0%, #f00 50%, transparent 51%, transparent 100%);
}

Ну как же нет?
htmlbook.ru/css/border-image

Делаете png, у которого нижняя часть белая, верхняя - прозрачная...

А зачем вы дали для лого и left и margin? Уберите margin и все получится.

.logo {
	position: absolute;
	left: calc(50% - .6em);
  background: #000;
  font-size: 4em;
  width: 1.2em;
  text-align: center;
}

О чем ты? Тут совершенно незачем position. У тебя два блока - заголовок и основная часть. Каждый из них разбит на 3 части:
- заголовок: категории, группа пунктов 1, группа пунктов 2
- основная часть: группа пунктов 3, группа банеров 1 и группа банеров 2.

Все что тебе надо сделать - задать одинаковую ширину в процентах или vh:
1. категории и группа пунктов3, например width: 20%;
2. группа пунктов 1 и группа банеров 1, например width: 60%;
3. группа пунктов 2 и группа банеров 2, например width: 20%;

Сомневаюсь, что при использовании display: flex тут вообще потребуются медиа-запросы.