Andrew Garfield

let arr = [4, 12, 6, 3, 8, 5];
let sorted = arr.slice().sort((a, b) => a - b);
console.log(arr);
// [4, 12, 6, 3, 8, 5]
console.log(sorted);
//[3, 4, 5, 6, 8, 12]

Всё что нужно - это добавить к родителю эти свойства.

display: flex;
justify-content: center;
align-items: center;

клик
Попробуйте тут. Возможно подойдет.

Вам нужно убрать высоту у дочерних элементов и тогда все должно заработать.

Советую обратить внимание на курсы, которые я указал ниже.
Обучение
• Джош Кауфман «Первые 20 часов. Как научиться чему угодно... быстро»
• ru.learnlayout.com
• htmlacademy.ru/program
• w3schools.com
• flexbox.ninja
• Карта развития веб-разработчика

Видеокурсы HTMLAcademy
• htmlacademy «Базовый HTML и CSS»
coursehunters.net/course/bazovyy-html-i-css-18-2017
• htmlacademy «Продвинутый HTML и CSS»
coursehunters.net/course/prodvinutyy-html-i-css-po...
• htmlacademy «Профессиональный HTML и CSS Уровень 1»
coursehunters.net/course/professionalnyy-html-i-cs...
• htmlacademy «Профессиональный HTML и CSS Уровень 2»
coursehunters.net/course/professionalnyy-html-i-cs...

Справочники
• htmlbook.ru
• webref.ru
• developer.mozilla.org/ru/

Выполнение заданий
• flukeout.github.io (изучение селекторов в CSS)
• flexboxfroggy.com/#ru (изучение flexbox в CSS)
• flexboxdefense.com (изучение flexbox в CSS)
• dmitrylavrik.ru/training/process/flexbox-grid (создание сетки на flexbox)
• cssgridgarden.com/#ru (изучение gridbox в CSS)

Задачи для практики:
• htmlbook.ru/practical

Макеты для практики:
• drive.google.com/drive/u/0/folders/0B8LYygUI_oGeSG...
• freebiesbug.com/psd-freebies/website-template/
• symu.co/freebies/templates-4/
• dcrazed.net/free-photoshop-psd-website-templates/

Как вариант.

Вы позиционировали .contacts__text-block абсолютно и он "вылез" из потока, соответственно footer занял его место.

В твоем случае через :before.


Но лучше меню делать через список.

Так?
UPD.