Rooly

Нужно всё обернуть во wrapper (( лежит сразу после боди )) >> должно помочь.
У вас нет адаптива.

.wrapper {
  min-height: 100%;
  position: relative;
  overflow: hidden;
}

Первых раз вижу, чтобы контейнеру задавали padding, так и не понял зачем это.
footer-copyright >> margin: 0 auto >> Он на всю ширину, зачем писать этот код?

overflow: hidden не вариант использовать.
Мозги нужно использовать, прежде чем использовать css.

Нужно растянуть body на всю страницу, в вашем случае использован говнокод.
Растягиваем на всю страницу

html {
  height: 100%;
}
body {
  padding: 0; /// если не сброшены
  margin: 0; /// если не сброшены
  min=height: 100%;
}

В плане оптимизации кода >>> слейте всё в один link, у вас сильно много запросов на файлы в плане css и js кода. Для css используйте scss. Готовый javascript можно тоже свести в один файл (( production версия, dev версия >> раскидывайте код по модулям иначе будет истерика в плане отладки, поддержи, добавления )).

Ещё есть много к чему придраться (( грубейшие ошибки ))

Сетку бутстрапа для вёртски возьмите ( всё будет ровно и понятно, легче делать респонсив ). Элементы бутстрапа я бы не рекомендовал брать ( пишите их сами. ничего сложного нету ), потому что длинное именнование селекторов, что не есть гуд и по оптимизации лучше писать с нуля.

Спасибо за ответы, стало понятнее что это такое.
Ещё меня один вопрос интересует ---- когда мы строим модульную сетку сайта ( его композицию ), то мы используем другую сетку ( обычно 12 колоночную ). Это "другая" сетка ( т.е 12-колоночная, к которой будут привязаны модули ) будут так сказать "ВСПОМОГАТЕЛЬНОЙ"?