Inexplicable gap in a bootstrap row/column - html

Question

I have been trying to code a simple gallery in Bootstrap, however, there is an unnecessary gap that keeps on appearing again and again on the right side of the column. I am unable to understand the cause of this gap.
Here is the HTML Code:
<div class="row" id="r2">
<div class="col-md-12" id="heading">
<h1>| PROJECTS |</h1>
</div>
</div>
<div class="row no-gutters">
<div class="col-xs-12 col-sm-6 col-md-4">
<img src="img/9.jpg" style='width: 100%; object-fit: contain'>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 left">
<img src="img/10.jpg" style='width: 100%; object-fit: contain'>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 left">
<img src="img/11.jpg" style='width: 100%; object-fit: contain'>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-xs-12 col-sm-6 col-md-4 left">
<img src="img/8.jpg" style='width: 100%; object-fit: contain'>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 left">
<img src="img/7.jpg" style='width: 100%; object-fit: contain'>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 left">
<img src="img/8.jpg" style='width: 100%; object-fit: contain'>
<div class="overlay">
<div class="text">View More..</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clear"></div>
Here is a screenshot of the webpage showing the gap:Right Side Gap
The CSS Code :
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0px;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.overlay:hover {
opacity: 0.8;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
#r2{
background:#2952a3;
margin:0;
}
Any sort of help would be really appreciated!