Можно верхний в body, нижний (белой картинкой с выпуклостью) - в обёртку, расставив значения z-index. Боковые картинки прикрепить псевдоэлементами по бокам.
Нашла, что влияет на исчезновение, это margin: -4px auto 20px; в h1 {}.
Если его убрать, то при всех значениях ширин h1 отображается.
С ним h1 при >1200 уходит сильно вправо из-за свойства right: -1000px у элемента :after.
Если важно сохранить точное положение h1 в мобильной и десктопной версии с участием margin: -4px auto 20px; , то придется разбираться более глубоко, возможно править целые блоки.
Тоже такая мысль была.
Но я отказалась от неё в пользу grid, потому что, в данном случае, избегаем лишней разметки и, таким образом, получаем более гибкое решение.
Другое дело, если использовать только bootstrap классы, то, конечно, подойдёт вариант и с лишними блоками в разметке.
"Открываю, а список выпадает вправо" - с тем кодом, что у Вас сейчас, не нашла такого поведения. Всё (при всех ширинах экрана) - сверху вниз.
Уточните, пожалуйста, при каких условиях работает не так, как хочется.
В моём примере тень от первого блока видна благодаря установленному z-index)
Видимо, задавая вопрос, Вы имели в виду какой-то другой конечный результат)