Андрей Б.

Выкладывай отрезок кода, потому что быть такого не может.
codepen.io/anon/pen/qdVVQZ как видно все работает

К примеру так

.header .contacts .phone--big
или
.header .contacts .phone--large

Правда тут придется просто добавить этот класс через запятую к старому чтобы старые стили применить, а ширину уже отдельно написать.
По хорошему лучше делать отдельным классом, типо class="phone phone--big"
Если есть возможность убрать из каскада .contacts, уберите везде.

в гугле решений полным полно.
используй scrollTop()

Уже обсуждалось
Cтоит начинать использовать flexbox?
Как использовать flexbox на реальных проектах?

А стоило всего лишь набрать "flexbox" в поиске тостера, лентяи

Батенька, да вы страдаете нездоровым перфекционизмом. =)

1)
clearfix у меня такой

.cf:before, .cf:after
	content ""
	display table
.cf:after
	clear both

IE? не неслышал

2) Да как удобно лично тебе, всем пофиг.
3) См пункт №2. Только помни, что при overflow содержимое обрежется, если оно вылезает.
4) Нет

Спи спокойно =)

Нет такой книги, есть принципы верстки отдельных частей, каких-то сложных моментов.
Для понимания общей картины вам нужен опыт, всего лишь. Так что тупо продолжайте верстать, все будет.
И да, исследуйте структуру чужих сайтов в инспекторе. Хотя этот совет может быть коварным, иногда такое увидишь ...

Чтобы фон и рамка огибали, так не получится, по крайней мере в вашем контексте. Получится только для одного из блоков с текстом. Пример jsfiddle.net/dnc8rz1L/7
Чтобы сделать для двух, нужно сделать для них обертку и уже обертке указать фон и рамку, но я так понимаю вам нужно их разделять. Поэтому по другому никак.

Насколько я помню, нужно вставлять не полностью url, а только свой индентификатор.

Подозреваю что у вас задерживается рендеринг страницы. Попробуйте перенести скрипты в конец документа.
Без кода сложно что-то сказать.
UPD: Может это поможет frontender.info/script-loading

Почему так происходит вам уже написали. Хочу заметить что в случае с inline-block нужно убирать отступы между блоками. Сделать это можно например указав для родителя font-size: 0; и не забыть переопределить его для дочерних элементов (если в них есть текст). Подробнее.
Только в вашем случае еще нужно поделить блоки на равную ширину. 1000 / 3 = 33.3333% (или 333.3333px)

или можете позиционировать блок абсолютом с выравниванием по центру как вам и нужно, форк

Можно ведь самому написать, тут ничего сложного нет.
Из готового например вот, адаптируйте под свой макет.

Это паралакс