Как указал автор выше, делаю я по такому же алгоритму.
*стили*
*стили до 767*
*стили до 992*
*стили до 1200*
и все
Именно в таком же порядке ибо, изменить иерархию и все хана кароче
Я бы сверстал это так.
Родитель у которого есть 2 дочерних блока, родителю даем флекс и space-between. Дочерним даем макс ширину которую вы указали, и ширину 100 процентов. Первому дочернему даем флекс-direction: колона, второму также.
и дальше сами
p.s а чтобы выровнять align-items: flex-start; потому-что видно что блоки по верху отцентрированные
Делайте этот блок - без контейнера все просто.
Секция у нее два дочерних элемента, предположительно div. Секции задаете display: flex; и нужные настройки.
первому блоку даете фон, второй просто оформляете. Ничего сложного.
Родителю задаете нужную ширину + display: flex; align-items: center; justify-content: center; , пунктам меню задаете 100 процентную ширину. На первый выпадающий делаете абсолютом у первого пункта и ему просто задаете фикс ширину и padding ну и все что.