Александр Юдаев

Я учил CGI (да, да когда-то был такой язык) и JS на примерах.
Качал готовый макет, делал скриншот и делал сайт с нуля, а потом сравнивал что сделал как в шрблоне а что нет.

Нет 100% правильного решения проблемы, но опыт в разработке появится и сможете сравнить с другими програмистами веб.

я всегда смотрю на сайте какие медия более популярны.
по стандарту использую такую сетку:

1200 +
980 - 1199
769 - 979
640 - 768 (чтоб мелкие таблеты в portrait могли получить визуализацию эдентичную телефонам)
до 639 или 640 (зависит от проекта)
иногда добавляю 320 и 480

когда проект большой беру сетку бутстрапа и допиливаю

На практике я не использую offset а пустые блоки.
В вашем случае самый простой способ это добавить пустые колонки.

<div class="row">
    <div class="col-md-offset-1 col-md-10">
          Блок с отступом слева.
    </div>
    <div class="col-md-1">
    </div>
</div>

только убедитесь что в css колонкам прописано min-height: 1px;