Выложите код с видимой проблемой в песочницу.
Сейчас в вашем коде ошибок нет.
Значит, либо специфичность либо забыли meta viewport либо еще что-нибудь, чего мы не видим.
Станислав Пономарев, у девочек вроде нет дальтонизма, но у вас на примере того, что нужно нарисовано так:
красный под зеленым, синий справа над розовым (учитывая), что розовый это контейнер, то синий справа от зеленого и красного и под ним пусто.
Что после этого значит фраза "а вот красный никак не могу поставить под синим", я вообще не понимаю.
border-radius не работает с border-image
Чтобы получить скругленную границу градиентом, нужно подложить вниз псевдоэлемент с фоном градиентом чуть бОльшего, чем элемент и перекрыть его фоном элемента.
Визуально получится граница.
но по правилам нельзя использовать h1 больше одного раза на странице
Во-первых, можно. Но сеошники могут начать шуметь.
Могу ли им задать один класс?
Ничто вам не мешает.
Только это довольно странно.
Это точно заголовки разного уровня? Возможно, если хорошо подумать, то окажется, что тот, который h1 вовсе не h1?
Но это придется показывать макет.
Сначала пусть откроет вот это и выяснит реальный размер вьюпорта https://www.esolutions.se/en-GB/test
И еще есть единицы измерения vmin и vmax.