WapSter

body {
  margin: 0;
}

Для таких целей нужно использовать событие transitionend, а не setInterval. По твоему сценарию скорее подойдет setTImeout. Но тоже могут возникнуть проблемы.

https://developer.mozilla.org/ru/docs/Web/CSS/attr

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

В этом случае два блока текста получаются одинаковыми.

глазомер хромает посмотри цифры в девтулзах

Width: 100% max-width: 600px

это значит блок 100% от ширины родителя, но ограничение не даст ему увеличиться в 600px.

Если мы записываем max-width и width в процентах, то разницы между ними я вообще не вижу.

даже не знаю где бы такое пригодилось.

Компeнсируют паддинги контейнера, имеют необходимые стили для разсположения блоков сетки.

К содержимому canvas через css не обратится. Ищи объект изображения в js и удаляй или обнуляй свойство src

У первого варианта не поддерживается ie, у второго реализация посложнее немного, но поддержка на много лучше.

https://github.com/anseki/leader-line

.header_banner {
    opacity: 0.9;
    background-color: #330066;
    background-image: linear-gradient(45.0deg, #0169b4 18%, #a72b8f 81%);
    background-position: center;
    background-repeat: no-repeat;



   // ты задал блоку высоту элементы не поместились в эту высоту и ушли за границу блока
   height: 750px;
}

При помощи градиента

Почему бы не глянуть поддержку браузерами? Полноценная работа только в firefox 68+. Стилизуй li для маркеров, а текст засунь в span.

Нет из js никак не получить псевдоэлемент :before и :after. Но можно менять класс их родителю и в зависимости от этого класса изменять стили псевдоэлементов.

И в чем собственно сложность, очень простой блок.