Help. Align my images into an equal 9 square grid.

Im using a template, actually two templates im taking different element from. 

I’ve got a Lightbox image gallery. 

But in my project the images are all in a line running down the left.

In the template im working from they look like a rubix cube, 9 equal squares. 

I have the .CSS linked from the original template in the head of my project.

Can anyone tell me how to fix this please? 

Here is my HTML:

<div class=“full-screen-portfolio” id=“portfolio”>
<div class=“container-fluid”>
<div class=“col-md-4 col-sm-6”>
<div class=“portfolio-item”>
<a href=“img/big_portfolio_item_4.png” data-lightbox=“image-1”><div class=“thumb”>
<div class=“hover-effect”>
<div class=“hover-content”>
<h1>Biodiesel <em>squid</em></h1>
<p>Awesome Subtittle Goes Here</p>
</div>
</div>
<div class=“image”>
<img src=“img/portfolio_item_4.png”>
</div>
</div></a>
</div>
</div>
<div class=“col-md-4 col-sm-6”>
<div class=“portfolio-item”>
<a href=“img/big_portfolio_item_2.png” data-lightbox=“image-1”><div class=“thumb”>
<div class=“hover-effect”>
<div class=“hover-content”>
<h1>raclette <em>taxidermy</em></h1>
<p>Awesome Subtittle Goes Here</p>
</div>
</div>
<div class=“image”>
<img src=“img/portfolio_item_2.png”>
</div>
</div></a>
</div>
</div>
<div class=“col-md-4 col-sm-6”>
<div class=“portfolio-item”>
<a href=“img/big_portfolio_item_3.png” data-lightbox=“image-1”><div class=“thumb”>
<div class=“hover-effect”>
<div class=“hover-content”>
<h1>humblebrag <em>brunch</em></h1>
<p>Awesome Subtittle Goes Here</p>
</div>
</div>
<div class=“image”>
<img src=“img/portfolio_item_3.png”>
</div>
</div></a>
</div>
</div>
<div class=“col-md-4 col-sm-6”>
<div class=“portfolio-item”>
<a href=“img/big_portfolio_item_1.png” data-lightbox=“image-1”><div class=“thumb”>
<div class=“hover-effect”>
<div class=“hover-content”>
<h1>Succulents <em>chambray</em></h1>
<p>Awesome Subtittle Goes Here</p>
</div>
</div>
<div class=“image”>
<img src=“img/portfolio_item_1.png”>
</div>
</div></a>
</div>
</div>
<div class=“col-md-4 col-sm-6”>
<div class=“portfolio-item”>
<a href=“img/big_portfolio_item_5.png” data-lightbox=“image-1”><div class=“thumb”>
<div class=“hover-effect”>
<div class=“hover-content”>
<h1>freegan <em>aesthetic</em></h1>
<p>Awesome Subtittle Goes Here</p>
</div>
</div>
<div class=“image”>
<img src=“img/portfolio_item_5.png”>
</div>
</div></a>
</div>
</div>
<div class=“col-md-4 col-sm-6”>
<div class=“portfolio-item”>
<a href=“img/big_portfolio_item_6.png” data-lightbox=“image-1”><div class=“thumb”>
<div class=“hover-effect”>
<div class=“hover-content”>
<h1>taiyaki <em>vegan</em></h1>
<p>Awesome Subtittle Goes Here</p>
</div>
</div>
<div class=“image”>
<img src=“img/portfolio_item_6.png”>
</div>
</div></a>
</div>
</div>
<div class=“col-md-4 col-sm-6”>
<div class=“portfolio-item”>
<a href=“img/big_portfolio_item_7.png” data-lightbox=“image-1”><div class=“thumb”>
<div class=“hover-effect”>
<div class=“hover-content”>
<h1>Thundercats <em>santo</em></h1>
<p>Awesome Subtittle Goes Here</p>
</div>
</div>
<div class=“image”>
<img src=“img/portfolio_item_7.png”>
</div>
</div></a>
</div>
</div>
<div class=“col-md-4 col-sm-6”>
<div class=“portfolio-item”>
<a href=“img/big_portfolio_item_8.png” data-lightbox=“image-1”><div class=“thumb”>
<div class=“hover-effect”>
<div class=“hover-content”>
<h1>wayfarers <em>yuccie</em></h1>
<p>Awesome Subtittle Goes Here</p>
</div>
</div>
<div class=“image”>
<img src=“img/portfolio_item_8.png”>
</div>
</div></a>
</div>
</div>
<div class=“col-md-4 col-sm-6”>
<div class=“portfolio-item”>
<a href=“img/big_portfolio_item_9.png” data-lightbox=“image-1”><div class=“thumb”>
<div class=“hover-effect”>
<div class=“hover-content”>
<h1>disrupt <em>street</em></h1>
<p>Awesome Subtittle Goes Here</p>
</div>
</div>
<div class=“image”>
<img src=“img/portfolio_item_9.png”>
</div>
</div></a>
</div>
</div>
</div>
</div>

never mind. 

I changed to: <div class=“full-screen-portfolio” id=“portfolio”>
<div class=“row”>

(edit not fixed)

Ok when I do that im left with a huge blank space in my footer. No idea.

fixed, no idea how.

My only beef now is there is no pop up window when my image thumbnails are clicked. 

edit: forgot my .CSS

fixed

I had a contact form in the footer now its gone.