Как сделать абсолютное позиционирование подменю?

Кода нет, так что погадаем.
1. position relative задавать не пункту второго меню, а блоку, в котором все пункты второго уровня.
2. На js узнавать номер пункта и вычислять top или transform.

Как сделать аккордеон bootstrap, чтобы содержимое блока не уезжало вверх при раскрытии?

Senseich, логично
есть еще альтернатива, кроме указанных выше: не сворачивать другие пункты при открытии нового

Как сделать аккордеон bootstrap, чтобы содержимое блока не уезжало вверх при раскрытии?

Senseich, могу предложить вставить якорь или запоминать topScroll в начальном положении и задавать его снова при клике на нужный пункт.

Как сделать аккордеон bootstrap, чтобы содержимое блока не уезжало вверх при раскрытии?

Senseich, нет, не улетает

Как сделать аккордеон bootstrap, чтобы содержимое блока не уезжало вверх при раскрытии?

Senseich, я ваш сайт открыла )))

Как сделать аккордеон bootstrap, чтобы содержимое блока не уезжало вверх при раскрытии?

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

Как сделать аккордеон bootstrap, чтобы содержимое блока не уезжало вверх при раскрытии?

Senseich, неа, у меня открывается всё вниз (хром)

Как сверстать такое?

Алибек Кулсеитов, Хуже, что грамотный верстальщик не умеет пользоваться поиском. Аналогичных вопросов в разных модификациях только за праздники было несколько штук.

Как сделать аккордеон bootstrap, чтобы содержимое блока не уезжало вверх при раскрытии?

Php Storm, у комментария справа есть три точечки и в них пункт "удалить"

Почему возникает отступ между блоками?

1. hr - одиночный тег, у него нет парного закрывающего (на проблему это никак не влияет)
2. #navigation инлайн-блочный - задавайте просто блочным при перестроении или задавайте родителю шрифт равный 0 и потомкам возвращайте или используйте флексы.

Как повлиять на соседний селектор?

Поменять их в коде в нужном вам порядке. Визуально поменять местами с помощью flex order.
Либо js.

Как заставить розовый блок выравниваться по нижнему краю?

align-self не выйдет, извините, не досмотрела ваш код.
либо позиционированием, либо дополнительным блоком

Как выравнивать кнопку по центру, а от неё уже расположить текст?

Флексы (ну либо не флексы, а инлайн-блоки и ширина calc)
кнопка ширины кнопки, спаны на все оставшееся пространство
в левом спане выравнивание по правому краю с отступом в 10 точек, в правом соответственно по левому

Медиазапросы, с чего начать?

Начать с понимания того, какого результата вы хотите добиться. Как должны вести себя блоки при изменениях размера окна. Ну а дальше просто перевести это с русского на CSS.

Тут https://jsfiddle.net/8kypp6b6/ показано изменение ширины вашего блока .chield с 40% на 90% при уменьшении окна до 600 точек и меньше.

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

p.s.

html { 
  overflow-x: hidden; 
}

не надо так.

Медиазапросы, с чего начать?

Сергей

Т.е. в начале описываешь общие стили, потом медиа под 1200 и ниже, потом под 1024, - 768 и тд.. если наоборот, то будут переопределяться стили не верно.

Уберите, пожалуйста, эту ерунду или перепишите правильно.
Для max-width условия должны идти по нисходящей, для min-width (mobile-first) в обратном порядке.

Как сделать такой блок адаптивно?

KRHD,
Если нет макета от дизайнера, то
3 блока, в каждом цифра + текст
на больших экранах - как на картинке, 3 блока в ряд.
на маленьких перестраиваете 3 блока в столбик
на крошечных перестраиваете внутренности каждого блока вертикально.

Для реализации нужно всего лишь изменять ширину при соответствующих условиях в media.

Если это не очевидно, то не стоит брать заказы в которых отсутствуют макеты для всех вариантов размеров.

Не удается добавить тень на стыке блоков. Какие есть решения?

Ваша тень на месте
зеленая: https://jsfiddle.net/odtz6asg/
темно-серая: https://jsfiddle.net/7x0491an/

Как сделать такую рамку в CSS?

Сергей Коноваленко,

Элемент <fieldset>предназначен для группирования элементов формы. Такая группировка облегчает работу с формами, содержащими большое число данных, например, один блок может быть предназначен для ввода текстовой информации, а другой — для флажков.

У вас форма? Нет.
Семантичное решение есть? Да.
Зачем городить помойку без необходимости?

Почему картинка вылезает за пределы блока?

sinevik, эммм.. мой "Ответ написан 48 минут назад"

Почему картинка вылезает за пределы блока?

sinevik,

Почему?

Потому что читайте спецификацию про инлайн-блоки и вертикальное выравнивание.
Лечить это с помощью line-height - костыль.