Overlay width doesn't follow the width of the flex container onto which I am trying to put

I am trying to create an image hover text overlay effect then when I give padding (which I commented out below) to the flex box (div.column) the overlay background which is given rgba(0, 0, 0, 0.6) won't fit but overflow the flex box I tried to give padding to it but it won't change. Please Help Thanks

Here is my html

<section flex-items section-padding">
    <div class="section-header">
        <h4>lorem</h4>
        <h2>lorem</h2>
        <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat,
            dolore!
        </p>
    </div>

    <div class="row">
            <div class="column">
                <img src="" alt="">
                <!--  -->
                <div class="img-overlay">
                    <div class="img-title">
                        <h4><a href="">lorem</a></h4>
                    </div>
                </div>
                
                <!--  -->
            </div>
            <div class="column">
                <img " alt="">

                <div class="img-overlay">
                    <div class="img-title">
                        <h4><a href="">lorem</a></h4>
                    </div>
                </div>
            </div>
            <div class="column">
                <a href="">
                    <img src="" alt="">    
                </a>
                

                <div class="img-overlay">
                    <div class="img-title">
                        <h4><a href=""></a></h4>
                    </div>
                </div>
            </div>
    </div>
</section>

and CSS

.flex-items {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

.flex-items .row {
 display: flex;
 flex-wrap: wrap;
 padding: 0 4px;
}

.flex-items .row .column {
 flex: 33.3%;
 max-width: 33.3%;
 /* padding: 0 20px; */
 margin-bottom: 20px;

 position: relative;
}

.flex-items .row .column .img-overlay a {
 color: #fff;
}

.flex-items .row .column .img-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;

 background: rgba(0, 0, 0, 0.6);
 display: flex;
 justify-content: center;
 align-items: center;
 color: #fff;
 opacity: 0;
 transition: opacity 0.3s;
}

.flex-items h4 {
 font-size: 25px;
}

 .flex-items .row .column .img-overlay > * {
 transform: translateY(40px);
 transition: transform 0.25s
 }

 .flex-items .row .column .img-overlay:hover {
  opacity: 1;
 }

 .flex-items .row .column .img-overlay:hover > * {
 transform: translateY(0);
 }

 .flex-items .row .column img {
  height: 100%;
 }