Евгений Петров

#big_block:after {
	content: "";
	display: block;
	clear: both;
}

Примерно так

У вас недвусмысленно стоит:

.price {
	float: left;
}

Допишите

.product:after,
#sales:after {
	content: "";
	display: block;
	clear: both;
}

Вам следует понять, что такое last-child (хотя, вроде, и по названию можно догадаться), и чем это отличается от last-of-type.

.product:last-of-type { 
	border-bottom-color: transparent;
}

Используем псевдоэлемент с градиентной заливкой и трансформацией.

Вариант, не зависящий от ширины viewport и не требующий overflow (а иначе при большой высоте контента не будет возможности прокрутить).

Как обычно, используем псевдоэлементы.
Чтобы не морочиться с учётом левой рамки, можно использовать linear-gradient, или overflow:hidden с другим transform-origin.

Проблема ваша, как и у многих, в незнании margin collapsing. Источник появления верхнего отступа у body в этом правиле:

.footer {
	margin-top: 40px;
}

Либо убирайте отступ, либо замените на padding, либо задайте:

.wr:before {
	content: "";
	display: table;
}

Правильно это делать для родительского элемента, но писать правила для имени тэга — верный путь к путанице.

Смена плотности начертания или наклона шрифта почти всегда выглядит жутко. Безусловно, при этом происходит изменение размера строки, что влечёт такие неприятные эффекты.

Хотите фиксировать рамку? Фиксируйте ширину колонок с помощью table-layout: fixed.

Другой вариант совмещения — использование skew().

Вот ещё пара ссылок применения подобного трюка:
Как сверстать данный (нестандартный) блок?
Как сверстать фон с треугольным прозрачным элементом с тенью?

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

Сделал примитивный пример с matrix2d — таскаем трасформированные объекты.

Как скруглить углы у картинки, когда используется эффект увеличения при наведении?
А вот так выглядит ваш пример

Пы.Сы. Chrome, Opera, как и Яндекс-браузер, используют один движок, так что писать про Оперу особого смысла нет.

Всё верно вы думаете. Применение col и colgroup уместно более чем.
Только не пойму, зачем в вашем примере используется colgroup. Если задавать ширину для каждой колонки отдельно, это не требуется.
Если же группировать, то следует сделать вот так.
Даже col позволяет группировать.

Пы.Сы. совместное использование col и colgroup уместно, когда в группе однотипных элементов нужно вклинить один или несколько столбцов с другими стилями.