Why does the image overlap with another section?

Question

css

There is a section, when you try to add a background image there, the image starts to overlap with another section.

<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>

I tried to add a fixed height, but it still climbs to another block.

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

The background mixin itself:

.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;
}

As on the layout:

As mine: