Андрей Б.

1. Там применяется float к классу .price. Вот родитель у вас и схлопнулся.
Решение: укажите родителю clearfix или overflow: hidden;

2. Читаем про last-child внимательней.

Псевдокласс :last-child задает стилевое оформление последнего элемента своего родителя.

А у вас идет последним элемент с id deep_right. Чтобы применился .product он должен быть последним элементом в своем родителе.

P.S. В .box1 у вас прописан display: inline-block; в то время как в .price указан float: left;
float делает элемент блочным, поэтому inline-block не работает и соответственно он тут лишний.

Firebug все верно показывает, [div] растягивается на всю ширину контейнера, у вас там похоже заголовок и [p] у которых есть margin(внешний отступ) по умолчанию, он не растягивает div.wrapper по высоте.
wrapper в данном случае имеет те же размеры что и дочерний блок, задайте ему например overflow: hidden; и размеры изменятся.

Вангую что для обертки этих двух блоков указан overflow: hidden;

На github иконки сделаны шрифтом, логотип в том числе.

Отвечу коротко, нужно иметь представление что это такое и как использовать, а дальше уже по мере надобности погружаться в дебри. Из более менее повседневной жизни, чаще используется SVG. Остальное это как вы говорите "желательно".

Добавь:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

codepen.io/anon/pen/waKmaE

gulp-rigger

Сама вставка происходит таким образом
//= template/header.html

Никак. При абсолюте блок выпадает из потока, родительский блок его не видит.
Через JS определяйте размеры абсолютного блока и подставляйте эти значения родительскому. Больше никак.