Why does my image hover move to the left? - html

Question

I have an image with some overlay text. Whenever I hover my mouse over my image, the content displayed once hovered is moved to the left of the original image. The hovered content is shifted 69 pixels to the left. I want the hovered content to be directly hovered over the image. How can I fix this?
HTML
<div class="row">
<div class="container col-lg-3">
<img src="Images/Coding.jpg" alt="" class="image">
<div class="description">
<h6 class="titles">
Coding
</h6>
<br>
<i class="far fa-keyboard fa-2x"></i>
<br>
<br>
<p>
Projects | Learning | Design
</p>
</div>
<div class="overlay">
<div class="text">
<h5>
Take a peak at my offers, current projects, and qualifications
</h5>
<br>
<a class="btn btn-outline-light btn-sm" href="coder.html" role="button">
Explore more
</a>
</div>
</div>
</div>
</div>
CSS
.container {
position: relative;
width: 250px;
height: 250px;
}
.container:hover .overlay {
opacity: 1;
}
.image {
display: inline-block;
width: 250px;
height: 250px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 250px;
width: 250px;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}

Answer 1

Because container class tacking a padding so please add padding:0px;
.container {
position: relative;
width: 250px;
height: 250px;
padding:0px;
}