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

Еще шаги добавьте в процентах от продолжительности анимации. 10% {} 20%{} и т.п.

Вредоносный код может css может содержать - в кодировке base64, но воспользоваться им нетривиальная задача. По меньшей мере вашим данным на сервере ничего не угрожает. Под теоретической угрозой пользователи сайта.

Посмотрел я.метрику в нескольких проектах... За последний год посетители с IE версий 8-11 чуть меньше 4.85%. Кажется рано...

Дизайнера конечно на кол, но можно так попробовать - https://codepen.io/aliencash/pen/dqLaRQ?editors=1100#0

потому что у вас за первым тегом li идет второй тег li, а не header как вы пишете в css.

header .navbar .nav li:hover + li:after{
  background-color: #000;
}

теория:
https://developer.mozilla.org/en-US/docs/Web/CSS/c...

пример:
https://codepen.io/aliencash/pen/YOzgap

поддержка браузерами:
https://caniuse.com/#search=column-count

Уже спрашивали до вас, почитайте тут - Откуда появляется горизонтальный отступ у инлайн-блоков?

Дизайнера на кол. Но перед этим пусть вам скинет этот круг в SVG.

Вы меняете способ отображения блочного элемента на строчный (inline). В этом случае элемент ведет себя как символ. Так же как буква или цифра или спец.символ в тексте. А особенностью символов является межсимвольный и междустрочный интервалы. На скриншоте вы как раз и видите междустрочный интервал между inline-блоками.

.drop:hover > .info_drop { - это для вложенного блока, а у вас они друг за другом, значит .drop:hover + .info_drop {

Через input:checked делайте, если с js незнакомы.