Image dimensions not matching p

<div class="productsContainer">
        <div class="card my-5">
                    
            <img src="./images/burg.jpg" alt="Burger" class="card-img-top my-1 img-fit">
            <div class="card-body">
                <h5 class="card-title">Burger</h5>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente soluta quo blandi</p>

            </div>
        
        </div>
        
        <div class="card my-5" >
                    
            <img src="./images/past.jpg" alt="Pasta" class="card-img-top my-2 img-fit">
        <div class="card-body">
            <h5 class="card-title">Pasta</h5>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente soluta quo blandi</p>

        </div>
        </div>        
    <div style="background-color: rgb(166, 15, 172);"class="productsItems">test4</div>

    </div>

.productsContainer{
    display: grid;
    grid-template-columns: auto auto auto;
    outline: 2px solid black;
    padding: 10em;
    border: 3px solid red;
}
.productsItems{
    padding: 5em;
    margin: 3px;
}
@media screen and (min-width:481px)and (max-width:781px){
    .productsContainer{
        display: grid;
        grid-template-columns: auto auto auto;
        outline: 2px solid black;
        padding: 10em;
        border: 3px solid red;
    }
    .productsItems{
        padding: 5em;
        margin: 3px;
    }
}