Почему картинка налезает на другую секцию?

Есть секция, при попытке добавить туда фоновое изображение, изображение начинает налeзать на другую секцию.

<div class="black-background">
 <div class="container">
<div class="row">
  <div class=" col-lg-2">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</div>
 </div>
</div>

Пытался добавить фиксированную высоту, но он все равно лезет на другой блок.

.black-background {
height: 200px;
.bg-img('black-background.jpg') ;/// это миксин
}

Сам миксин для фоновых рисунков:

.bg-img(@img, @pos:center center, @att:scroll) {
  background-image: url('@{img-folder}@{img}');
  background-position: @pos;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: @att;
}

Как на макете:

Как у меня: