Андрей Кварцов

Измените стили сайта:
У селектора .content-list li уберите свойство padding: 2% 10%

А селектор .content-list li a нужно сделать таким:

.content-list li a {
    display: block;
    padding: 2% 10%;
    color: #777;
}

Например вот так

Например:

<div class="gif">
 <img src="animation.gif">
</div>

.gif {
 width: 100px;
 height: 100px;
 background: url(static.jpg);
}

.gif img {
 display: none;
}

.gif:hover img {
 display: block;
}

Если вы понимаете, что есть просто верстальщик, а есть front-end разработчик, то должно понимать, что вёрстка будет сразу проходить по нужному в проекте сценарию, а не стандартно верстаться.

В любом случае, семантику нужно соблюдать. Собственно, а что сложного в семантике?

Все 3 свойства обязательны к изучению. Да и учить из этого придётся только flex, с остальным проблем не должно быть.

albburtsev.github.io/jquery.typist

Вот так можно отцентрировать, блок, а пропорциональное уменьшение блока можно найти здесь же на тостере

Прозрачность какому классу нужно менять и при наведении куда?