Lightbox/Bootstrap - HR started jumping above content

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.