[Помогите] Bootstrap проблема с колонками

Ребят, создаю шаблон, делаю контейнер в него кидаю 3 ряда(row) по 4 колонки(.col-md-4*3) в каждую созданную колонку вставляю по фотографии, так вот эти фотографии при увеличении размера экрана начинают наезжать друг на друга, в чем беда?Это раз
Второе в этот же ряд пытаюсь в css документе добавить background-imgae так этот фон не мостится в весь ряд, а появляется чуть ниже захватывая и нижние ряды(которые в своем контейнере) короче у меня кривые руки.....или я не знаю..помогите!

В общем есть такая проблема:
Есть шаблон сайта на котором много тегов section, в каждом таком теге заключены row с колонками, для каждой секции есть отдельный стиль который определяет фон для секции вот вырезка из html:

HTML:

<section id="main"> 
<div class="container-fluid" >
  <div class="row">
  <div class="col-lg-12 сoc"><img class="cocpit" src="img/cocpit.png" alt="cocpit">
  </div>
</section>

вот стиль для этой секции:

HTML:

#main {
   background: url(../img/7.png)no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size:cover;
  min-height: 1200px;
}
.cocpit {
  width: 1280px;
padding: 650px 10px 0 10px;
}

Я почему то не могу сбросить сюда снимок экрана и показать как эт выглядит....
Попробую обьяснить: когда открываю страницу вижу фон а на нем снимок по всей ширене экрана вставленный в ряд, но как только начинаю уменьшать окно браузера фон начинает обрезаться....а в от снимок выходит ЗА фон и ЗА окно браузера....я уже запарился не пойму в чем проблема и что нужно изменить