Шаблон расползается при увеличении маштаба

Пытаюсь сделать html шаблон с использованием bootstrap 3, при большом масштабе все хорошо, но если масштаб уменьшить все очень не красиво смещается.
http://dostup[dot]htmlmapgenerator[dot]ru/

в бутстрапе используется подход называемый mobile first. Это значит вы сначала верстаете для маленьких экранов, потом медиазапросами под большие.

Сначала уменьшите окно браузера и сверстайте свою шапку так, что бы она нормально смотрелась
Потом пишете правило
@media (min-width: $screen-sm-min) {
// ...
}

И внутри переопределяете стили так, чтобы шапка нормально смотрелать на ширине от $screen-sm-min (по умолчанию - 768)

Далее - @media (min-width: $screen-md-min) {} и @media (min-width: $screen-lg-min) {}
(Добавление)
кстати, классы col-lg-* действую только на больших экранах.
Для поменьше нужно писать col-md* и col-sm*
Можно комбинировать

<div class="col-sm-10 col-md-8 col-lg-6">
на маленьком колонка будет занимать 10 колонок
на среднем - восемь
на большом - шесть

-----
Чем больше узнаю, тем больше я не знаю.