Антон Нагаец

media query - не ?
Использование Media query MDN

Если не делали сброс стилей браузера то такое будет. Подключите https://github.com/necolas/normalize.css/blob/mast... и посмотрите.

1) Поменяй в следующем блоке
word-break: break-all; на word-wrap:brake-word;

pre.code code {
  display: block;
  font-size: 12px;
  line-height: 20px;
  font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', monospace;
  white-space: pre-wrap;
word-wrap:brake-word;
  background: rgba(0, 0, 0, 0);
}

2) Все правильно и будет прыгать.у тебя не отрегулированы внешние отступы.

background: rgba(255 255 255 0.5)

http://caniuse.com - column-count
Пример на codepen.io

С кода на сайте.

background-image: linear-gradient(-12deg, #036ded 19%,#5bd6dd 81%);

Используем Userscript

.mid {
  width: 1170px;
  margin: 0 auto;
}

Не наводит ни на какие мысли?
Давайте вспомним математику первого класса:
Разрешение монитора по ширине 1280, скроллбар браузера шириной 17. Итого видимая область 1280-17=1263 пикселя. Теперь посмотрим размер блока 1170 пикселей. Боковые интервалы получаются 1263-1170=93/2=46 пикселей.
Все правильно. Так и получается на вашем макете. см на ответ MaxKorz: "Так сверстали" ¯\_(ツ)_/¯

1) Делаем формы для заполнения.
2) Сохраняем переменные. (js/php без разницы.)
3) Настраиваем шаблон печати, куда вставляем эти самые переменные.
4) Создаем шаблон печати для принтера или генерируем PDF ( Как вариант мануала
5) PROFIT.

1. :before :after и https://habrahabr.ru/post/126207/ смотрите треугольники
2. Если изменение размера блока "прямкакнаgif" - только js
3. background-size:cover - для фона родителя. Паттерны для дочернего элемента.
4. Адаптация но новым размерам блока - Да / Изменение размеров блока - js

Никита. Извините что влезаю со своими пятью копейками но Fancу на вашем шаблоне меньшая из проблем.
1) Проблема с размерами и адаптивностью.
2) Проблемы с подгрузкой ресурсов разными браузерами.
перед вставкой фансибокса ИМХО стоит решить данные проблемы.
Фанси вставляется просто подгрузкой скрипта и оформлением картинок соответствующим дивом.
P.S. Пожалуйста выбросите тот генератор страниц которым вы пользуетесь. Пишите код руками.

Если очень кратко то : bitrix24.d-it.ru/forms/ тут у вас генерируются формы. Сама форма создается в iframe и показывается пользователю. Вам необходимо посмотреть код который генерит сами формы и проверить пути откуда идет подгрузка JS + CSS. Следующим действием найти файл который генерирует формы и посмотреть именно на вывод, Где эта форма лежит. Подозреваю что код ее после генерации лежит в БД. Ну и соответственно поправить HTML. После найти файл CSS в котором содержатся стили .bx-input .bx-field им уже прописать стили либо свои.
UPD:
Вообщем ищите в базе по хешу 0c8dca990f7f639306ea62be5498b712 HTML код формы
Ковыряйте bitrix24.d-it.ru/forms/iframe/style.css на предмет стилей.

0) Не расстраиваться и не раздваиваться.
1) Стоит потратить пару дней на изучение материала о том как правильно расположить блоки на лендинге. Да и вообще какие блоки привлекают внимание и обеспечивают конверсию.
2) Нарисовать на листе бумаги UI макет. Посмотреть на него под разными углами и точками зрения. Но не своими, а потенциальных посетителей, можно прибегнуть к помощи друзей.
3) Навесить дизайн на этот макет. Если со скилом "графика и дизайн" не в лады, то всегда есть фрилансеры которые помогут.
4) Отверстать самому полученный макет.
5) Разместить.
6) Прогнать все по Чек листу, там в комментариях получше даже есть.
7) PROFIT... may be.

Дизигнер дает макет с определенным горизонтальным шагом, под этот шаг подгоняется сетка.
Бутстрап не использую из принципа. Слишком много вычищать приходится для облегчения из неиспользуемого. ( хотя сейчас может ситуация и изменилась)

Если вы имеете в виду Гриды то их множество. Погуглите запрос Grid system и будет вас щасте. Лично я пользуюсь 960.gs