How to fix container size issue?

Question

css

https://codepen.io/N1crO/project/editor/DBBQYk
The container size is 7px larger than the picture. For this container, a pseudo-element is set, which should cover the image with a semi-transparent background. But since it is set from the container, the background pops out by 7px. The image has parameters max-width: 100%, height: auto, the container should stretch to 50% of the page.
I think you need to somehow fit the container to the size of the image, but it should not be fixed.

<div class="services__item">
            <img src="img/services3.jpg" alt="Preparatory work">
            <div class="services__overlay">
                <h3 class="services__item-title">Preparatory work</h3>
            </div>
</div>

.services__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right: 10px;
    margin-bottom: 50px;
}

.services__item {
  width: 50%;
  position: relative;
}

.services__item img {
  max-width: 100%;
  height: auto;
}
.services__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(51, 51, 51, 0.6);
}

Answer 1

The container size is 7px larger than the image

is it services_item ?
if yes then remove width but specify display:inline-block
or for img specify width100%: