Ankhena

id в рамках страницы должны быть уникальны.
Значит, нужно обращаться по классу, использовать querySelectorAll

Раскомментируйте свойство grid-auto-flow

Изучайте гриды и флексы.
Сделать можно, например, так: https://jsfiddle.net/kj5vf8ah/

Вы можете:
1. Сделать фон градиентом с четкой границей
css.yoksel.ru/linear-gradients
2. Задать фон псевдоэлементу
3. Построчно так:

или даже так:

text-size-adjust: none; //запрет авто-увеличения текста на мобилках

https://developer.mozilla.org/ru/docs/Web/CSS/text...
Технология экспериментальная, нужно смотреть поддержку на caniuse и не забывать префиксы.

article:nth-child(-n+2) .new {
  color: red;
}

Может, вам поможет clamp, min или max?
https://developer.mozilla.org/en-US/docs/Web/CSS/max()
Поддержку проверяйте на caniuse

Или попробуйте переформулировать вопрос. Хотя бы опишите словами что там происходит с шириной блока.
А ещё лучше с картинками.

Что имелось в виду?

Это и имелось в виду. То, что написано в комментарии.

Родитель ничего не знает о высоте дочерних флоатов.
Если все дети флоаты, то высота родителя будет нулевой.
Чтобы она перестала быть нулевой и стала вести себя как высота по контенту, использовали overflow.

Если вы зададите родителю фон или даже лучше бордер и проведете эксперимент, то всё сами увидите.

Множественные фоны пишутся через запятую.
Первый верхний, последний нижний.
У вас верхний это линейный градиент, нижний картинка.

Например, что-то в таком духе https://jsfiddle.net/m06bkpdy/
Или svg
Или border-image
Или вообще объединить с картинкой, но нужно смотреть макет.

p.s. лучше вот так расположить градиент
Чтобы не высчитывать размеры для средней полосы.

Большим ячейкам задаете grid-column: span 2

С помощью :placeholder-shown
https://jsfiddle.net/Lnsj5ea6/

align-self отвечает за выравнивание конкретного элемента вдоль поперечной оси флексбокса.

Тем, которым нужно направо, задавайте align-self: flex-end

h2:hover::after {
content: "";
и т.д.
}

Либо
.title3:hover ~ .block-with-picture3 {}

По аналогии

Расстояние между блоками и чертой одинаковое, чего бы им съезжать?
https://jsfiddle.net/0k6a2bgs/

Ну держите


Другой вариант, без float, но с display: contents