Как правильно рассчитывать высоту padding и margin в резиновых макетах?

Например, когда есть два блока 30 и 70%, но есть еще и отступы по 20px.
Таким образом, что бы не было перевода на новую строку, width: calc(30% - 40px)
https://jsfiddle.net/uLb2yeoy/4/

Почему не отображаюся тени?

К сожалению, не знаю

Почему не отображаюся тени?

"widows" вместо "width"

Почему сайт не работает?CSS,HTML,JS не отображает?

Проверьте, картинка должна лежать по адресу welovepavel.esy.es/1/css/img/top_bg.jpg ее там нет

Как сделать от такие полоски но чтоб они отображались только на мониторе 22?

Вы имеете ввиду по бокам? Так это не полоски, а просто фон.
Делаете wrapper фиксированной ширины и центрируете его по горизонтали.

Как сделать от такие полоски но чтоб они отображались только на мониторе 22?

Начнем с того, что вы имеете ввиду, говоря "полоски"?

Как запретить "натекание" элементов друг на друга при изменении размеров окна браузера?

Во второй строке #left, #main, #right { float: none !important;

Как запретить "натекание" элементов друг на друга при изменении размеров окна браузера?

У элементов абсолютное позиционирование. Что бы не происходило "натекания", добавьте код:

@media screen and (max-width: 1100px) {
    #left {float: none !important;
    margin: 20px auto !important;
    position: relative !important;
   }

Разная разметка в лисе и IE .Что за мистика в wordpress?

coderisimo: а выше код можете показать?

Как сделать пропорциональный div?

Cosmos: нужно пропорционально увеличивать и высоту блока :before

Сетка bootstrap как быть?

Можно аналогию сделать для сайдбара. А вообще вина дизайнера, макет не правильный какой-то)

Как сделать маску версткой?

Зависит от конкретного случая. Если фото мало и они статичны, проще вставлять уже с наложением. Если узор разный и фото динамичные, то тут сложнее

Как сделать чтоб блоки на разных экранах не тянулись?

Картинка, которая стоит перед footer - инлайн элемент, они обладают свойством "волшебного пробела". Что бы изчез пробел, нужно либо вставить картинку внутрь блока, либо прописать картинке (class="contact") display:block

Сделал слайдер, а кнопки не работают?

Возможно это происходит из-за автоплея. В момент переключения срабатывает автоплей и т.к. две картинки, слайдер снова переключается на ту же

Каким образом генерируется изображение?

Прошу прощения, ссылку исправил