freeman0204

Кто вам сказал такую чушь? Он по центру, просто letter-spacing увеличило ширину символа, от этого цифра и сместилась!

Или вы до конца мысль не изложили или вопрос не задали, возможно даже сами не до конца понимаете то что именно не понимаете.
Если вы так сильно привязались к сетке, то вместо книги читайте исходники bootstrap.

Почему именно %? Есть же px,em... Или вы считаете если где-то так написано то пикселями нельзя сделать сайт адаптивным? Можно, при чем и без сетки!!!

Читая другие ваши вопросы, стало понятно что теории у вас много (в которой вы постоянно сомневаетесь), ну а опыта крайне мало. Возьмите бесплатный псд макет, и не используя css генераторы в brackets или что там ещё бывает, не используя bootstrap и прочие готовые сетки. Просто с нуля сверстайте, гуглите, смотрите исходники других сайтов, пошагово научитесь верстать, не копипастите код, не халтурьте. Это по моему единственный способ наконец понять почему делают именно конкретным способом. Учитесь на своих ошибках. В сложных ситуациях задавайте конкретные вопросы со ссылками на сделанную вами работу. С конкретным описанием проблемы. За одно просите критику. Потратив некоторое время за практикой ваши сомнения пропадут, ну а теория наконец станет полезной.

Практика ваше все!
Надеюсь был полезным.

UPD: что касается вопроса, там действительно не понятно что именно вы не понимаете

Используйте менеджер пакетов bower.io

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

Хотя известно же что поля это маргины а отступы падинги.

Запомните на всю жизнь - padding - это поля, а margin - отступы. Margin - это снаружи, это отступ от родителя. Padding - это внутри, поля для текста (или содержимого).

Хотя известно же что поля это маргины а отступы падинги.

Как раз наоборот.

делаешь для разных разрешений разный размер дивов в процентах ( 100% 50% 33% 25% 20% ) и картинку по всему диву по ширине растягиваешь

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

Судя по css значениям, это самая простая сетка от бутстрапа))) и отличается только наименованием класса!

А если по делу, то раньше, когда не было сеток, никто не делал адаптивные сайта. Да и в сетке нет ничего магического, это просто удобная структура для расположения блоков. Просто тогда их еще не придумали. Либо делали через скрипты. Раньше были таблицы. А сетку придумали чуть после, для замены таблиц. Т.к. таблицы это не тот html тег для постраения структуры шаблона и в плане css не такой гибкий как div.

.cols.col-6 - можно заменить на .leftCol и rightCol, каждой дать ширину по 50% ну и флоат. Так и было.

Я и сейчас старые сайты (давно сверстанные) адаптирую самыми обычными медиазапросами.

пример (вымышленный :) ):

.menu {
   width: 500px;
  @media (max-width: $breakpoint) {
      width: 100px;
  }
}
.menu2 {
   width: 550px;
  @media (max-width: $breakpoint) {
      width: 150px;
  }
}

/* ... другие блоки верстки аналогично */

Пишу все условия отдельно в каждом блоке, так удобнее.
В конце пропускаю все через combine-mq чтобы объединить одинаковые медиа-запросы

Задай этот вопрос дизайнеру. Который тебе сбросил кривую сетку. Объясни что должно быть кратно 12-ти иначе не получится. Либо обойтись без бутстрапа. Сделать свою сетку на 32, взять за это доп бабло.
Вот кстати обрати внимание: 960grid.ru

Написать кастомную сетку, используя susy или какой-нибудь аналог

Дичь какая-то.
Зафиксируйте ширину блока:
- минимальную
- максимальную
- или единственную если макет статичный

3 блока внутри расположите в ряд одним из способов (float / inline-block / table / flexbox)

Что касается ширины блоков, в правильном макете она должна измеряться в колонках: загуглите 960gs и Twitter bootstrap.
Если макет не по сетке то обматерите дизайнера самым грязным образом.

Условно блок выглядит так

<header>
    <div class="logo"></div>
    <div class="nav"></div>
    <div class="auth"></div>
</header>

header {
  width: 960px;
  // clearfix...
}
.logo,  .nav,  .auth {
  float: left;
   width: 33.3333%;
}

Вы что, гоните?
Может так лучше?
Ну или если уж совсем припекло, вот ваш пример
!!!!!
и вообще пора бы уже забыть про float, давно есть свойство display: flex, которое сейчас все браузеры жрут, если поддержка ie8 не нужна

Мало прав. Запускай командную строку от имени администратора.

input как раз inline-block, а не inline
www.w3.org/TR/2015/WD-html51-20151007/rendering.ht...

Я сделал бы как-то так: jsfiddle.net/Ivanq/j4a01ry7

Да, только стрелка это submit. В принципе, вот тоже самое, только не в таком виде, как у вас - screen.webirus.ru/2015-10-11_192442.png
Свои стили просто сделайте для input'ов и select'а. Стилизация форм

Мой вариант - https://jsfiddle.net/webirus/opdqch9e/1/