Советую обратить внимание на курсы, которые я указал ниже.
Обучение
• Джош Кауфман «Первые 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 занял его место.

Как вариант.