Lightbox/Bootstrap - HR started jumping above content - html

Question

I created a Bootstrap Thumbnail image grid originally and the HR would instantly jump below all of the images.
I decided to delete the Bootstrap image grid and change it to a Lightbox image grid which is so much better.
I've not got a problem that the HR which should be acting as a Footer HR, is now ignoring all of the pictures and is jumping straight back up to the top of the page.
Is this something to do with the pre-set CSS configuration within Lightbox?
HTML:
<div class="container lightbox">
<div class="gallery">
<div class="row row1">
<div class="col-md-3">
<a href="Pictures/Pic1.jpg" data-title="Picture #1" data-lightbox="Picture Number 1">
<img src="Pictures/Pic1.jpg" width="200px" class="img-thumbnail">
</a>
</div>
<div class="col-md-3">
<a href="Pictures/Pic6.jpg" data-title="Picture #2" data-lightbox="Picture Number 2">
<img src="Pictures/Pic6.jpg" width="200px" class="img-thumbnail">
</a>
</div>
<div class="col-md-3">
<a href="Pictures/Pic7.jpg" data-title="Picture #3" data-lightbox="Picture Number 3">
<img src="Pictures/Pic7.jpg" width="200px" class="img-thumbnail">
</a>
</div>
</div>
<div class="row row2">
<div class="col-md-3">
<a href="Pictures/Pic4.jpg" data-title="Picture #4" data-lightbox="Picture Number 4">
<img src="Pictures/Pic4.jpg" width="200px" class="img-thumbnail">
</a>
</div>
<div class="col-md-3">
<a href="Pictures/Pic5.jpg" data-title="Picture #5" data-lightbox="Picture Number 5">
<img src="Pictures/Pic5.jpg" width="200px" class="img-thumbnail">
</a>
</div>
<div class="col-md-3">
<a href="Pictures/Pic2.jpg" data-title="Picture #6" data-lightbox="Picture Number 6">
<img src="Pictures/Pic2.jpg" width="200px" class="img-thumbnail">
</a>
</div>
</div>
<div class="row row3">
<div class="col-md-3">
<a href="Pictures/Pic3.jpg" data-title="Picture #7" data-lightbox="Picture Number 7">
<img src="Pictures/Pic3.jpg" width="200px" class="img-thumbnail">
</a>
</div>
<div class="col-md-3">
<a href="Pictures/Pic8.jpg" data-title="Picture #8" data-lightbox="Picture Number 8">
<img src="Pictures/Pic8.jpg" width="200px" class="img-thumbnail">
</a>
</div>
<div class="col-md-3">
<a href="Pictures/Pic9.jpg" data-title="Picture #9" data-lightbox="Picture Number 9">
<img src="Pictures/Pic9.jpg" width="200px" class="img-thumbnail">
</a>
</div>
</div>
</div>
</div>
<hr class="bigHR2">
Very basic custom CSS :
.bigHR1 {
background-color: white !important;
color: white !important;
border: 2px solid white !important;
border-radius: 50%;
height: 1px !important;
width: 850px !important;
margin-left: 5%;
margin-top: -1%;
}
.row1 {
margin-top: 50%;
}
.row2 {
margin-top: 10%;
}
.row3 {
margin-top: 10%;
}
Both Bootstrap and Lightbox are installed LOCALLY, and am having no problem with Bootstrap on other pages of this website, so it must be the Lightbox.