Иван Беленков

Понимаю, что некропост, но вот решение:
поможет выставление для body вот этого свойства: -webkit-text-size-adjust: 100%;

Поставьте правой колонке overflow:hidden.
Вот так.

необходимо сказать, что всё просто пока у вас нету блоков которые вывалятся за пределы правой колонки(селекты и прочие выпадающие меню).
в таком случае лучше использовать вот такой лэйаут , но он не имеет поддержки IE6-7.

1. Новые теги HTML5 созданы не для удобства написания css-селекторов, а для семантики. div.page_header не несёт семантической нагрузки, в то же время header.page_header - явно говорит о том, что это именно шапка. С БЭМ это никак не конфликтует: класс .page_header__userblock вы можете засунуть хоть в div, хоть в header, на разметку это никак не повлияет.
2. Селекторы не дураки придумывали, использование классов оправдано там, где это задумано разработчиками. Если у вас встречается несколько схожих блоков на странице - задайте им класс. Если только один(например футер) - задайте ему id.
3. Ссылки верстают списком исторически. Потому что список имеет больший семантический вес, нежели просто набор элементов. В новой редакции HTML(элемент nav) ссылки меню задаются именно так, как вы предлагаете.

По дополнительному вопросу: да, это совершенно нормально, но если вы приверженец БЭМ, то вы будете писать иначе, т.к. задача БЭМ - избежать каскадной верстки.

Зависит от контекста. Для современных браузеров подойдёт решение с CSS3 единицами 'vh';
Для старых браузеров придётся задействовать javascript и отслеживать высоту экрана.
caniuse.com/#feat=viewport-units - первый вариант, height: 100vh соответствует высоте окна браузера.
https://api.jquery.com/height/ - второй вариант, $(window).height вернёт высоту окна браузера.
По первому варианту:

#hei {
    height: 100vh; /* 100vh - 100% от высоты viewport(окна браузера) */
}

По второму варианту:

function setHeiHeight() {
    $('#hei').css({
        height: $(window).height() + 'px'
    });
}
setHeiHeight(); // устанавливаем высоту окна при первой загрузке страницы
$(window).resize( setHeiHeight ); // обновляем при изменении размеров окна

для body необходимо задавать минимальную ширину({min-width: ...}), равную ширине/минимальной ширине вашего лейаута. Данная вами ситуация возникла из-за того, что ширина body меньше ширины вашего хедэра. Оттуда и белая полоса слева(горизонтальный скролл неизбежен).

Вот ваша ошибка, она детектится в шапке и, похоже, блокирует весь нижележащий код.

ReferenceError: SyntaxHighlighter is not defined
http://katekuzey.ru/
Line 37

если бутстрап третий, то:
getbootstrap.com/css/#tables-responsive

jsfiddle.net/G3HPP/1

такой clearfix служит не для запрета обтекания, а для фикса размеров элемента, который содержит float потомков.
благодаря этому хаку элемент растянется на максимально возможную высоту(например высоту самого высокого элемента-потомка), и ширину(если элемент inline-block или float).