Сергей delphinpro

.logo:hover { color: blue; }
сам лого там сделан шрифтом.

по стилистике кода:
- разные кавычки в html,
- код типа "ul.navleft li:hover, ul.navcentral li:hover, ul.navleft .active" лучше форматировать с переносом каждого селектора на отдельную строку (легче читать),
- код "margin-left: 10px; width: 25px; height: 25px;" тоже фигово, каждое правило на новой строке
по коду:
- нет указания кодировки
- label должен связываться с input (select, textarea) через атрибуты for-id
- класс .clear - лишний, как и элемент с его использованием (есть другие, более семантичные варианты очистки потока)
- описание поля следует после самого поля (некорректно логически, хотя конечно в CSS можно настроить любой вид)
- отправка формы - кнопкой (должна быть)
- универсальный селектор "*" не к месту,
- стилизация через имя тега (огромное зло, и, поверьте, сложно расширяемое и поддерживаемое)
Можно еще придраться к слишком общим именам селекторов (reg, submit и т.п.).
- селекторы типа tag.class - совершенно излишни, достаточно .class
............

В общем, таких мелких косяков еще кучу найти можно (я просто код посмотрел, не анализируя построение разметки, а там наверное тоже есть интересности), но убивать за это явно не стоит =)))

Все что можно, следует править в конфигурационном файле (_variables.[less|scss]). Только не в оригинальном, а в копии, подключенной перед оригиналом.
То что нельзя поправить в настройках - переопределять в конце стилей.
(Я предполагаю, что вы используете bootstrap в экосистеме bower с препроцессором)

Если вы не используете пакетный менеджер и/или храните стили бутстрапа в репе (в общем, по старинке, работаете как в каменном веке=) ), и не планируете обновлять его версию, то вполне можно править сам исходник.

Нельзя.

.position() возвращает отступ от ближайшего не-статик родителя.
А вам, вероятно, нужно относительно документа - .offset()

jsfiddle.net/j9vkodh3/2

потому что он находится в другом потоке элементов.

background-size: contain;
или если картинка

img {
max-width:100%;
max-height:100%;
}

Флоатами - никак.

можно так jsfiddle.net/DelphinPRO/83h7ccyf но это IE10+

upd jsfiddle.net/DelphinPRO/83h7ccyf/1

если у блоков фиксированные размеры, то можно так jsfiddle.net/DelphinPRO/qsw81eya

Рализация плейсхолдеров внутри input'a?
Посмотрите мой ответ там. Как раз по вашей теме.

Вы правильно поняли. При написании Desktop first - стили пишутся от большего к меньшему.

@media (max-width: 900px){} - правило учитывает только ширину вьюпорта на любом отображающем устройстве.
@media screen and (max-width: 900px){} - правило распространяется только на экраны монитора с соответствующим вьюпортом
@media only screen and (max-width: 900px){} - аналогично предыдущему
Помимо экранов (screen) могут быть и другие устройства представления информации - print, projection, tvи т.д.

Например так jsfiddle.net/DelphinPRO/uzmkyfr8/2

jsfiddle.net/DelphinPRO/d576g8n8/2
тут не уроки нужны, а просто знание CSS

Нет ничего проще :)
Ловите код (стили не оптимизированы, накидал на скорую руку, ну там сами допилите).
Вся соль в background-attachment.
jsfiddle.net/Lrkuhzda

Добавьте ID
<div class="wrapper_p" id="calc">

и поменяйте строку

//var section = document.getElementsByTagName("section")[0];
 var section = document.getElementById("calc");

Вероятно, у вас указаны неправильные пути к файлам шрифтов.

UPD
Откройте инспектор кода в браузере (F12 в Chrome), перейдите на вкладку network, обновите страницу. Увидите все запросы, которые делает ваша страница к серверу. Некоторые строки будут красные, это значит сервер вернул 404 ошибку (ресурс не найден). Просмотрите эти строки, по какому пути запрашивается шрифт и сравните с тем, по которому он лежит реально. Ну и поправьте, соответственно, пути в правилах url()

Даю мастер-класс :)

https://jsfiddle.net/jLq2b5av/

В строку https://jsfiddle.net/jLq2b5av/1/

Радиобатоны https://jsfiddle.net/jLq2b5av/2/

UPD
C учетом фокуса https://jsfiddle.net/jLq2b5av/3/

Потому что плавающие блоки выпадают из родительского потока. Так как в потоке .nav больше ничего не остается, - он схлопывается до нуля по высоте, соответственно и фона не видно (который вовсе не пропадает на самом деле).
Примените к .nav клирфикс, или создайте новый контекст форматирования (с помощью overflow или inline-block)
Ваш пример с клирфиксом

И еще: учите теорию htmlbook.ru css-live.ru

флоатами задачу не решить.
Можете воспользоваться multiple columns из css3
jsfiddle.net/5o644soy/9
поддержка caniuse.com/#search=columns

Вместе с бутстрапом скачиваются его исходники на less (bower i bootstrap) или sass (bower i bootstrap-sass).
Импортируйте в свой проект только файл grid.less (grid.scss) и будет у вас только сетка. (Ну может еще конфиг нужен будет)
Если не используете препроцессоры, самое время начать :)