image in a css grid wont center

Question

What it should do: 1 fr is an image of a product, 1fr is a description of the product (positioned on the right side of the image). the whole grid should be centered in the middle but it isnt. It centers but it leaves a huge gap between them.

HTML:

<div class="grid">
    <img src="../images/s6.png" alt="photo of the item">
    <div class="text">
        <h1 class=>V.2</h1>
        <h4>$54.00</h4>
        <ul>
            <li>Biquíni truangular com detalhes franzidos a lilás</li>
            <li>Detalhes metálicos dourados</li>
            <li>Alças ajustáveis</li>
            <li>Cintura subida reversível</li>
            <li>Opçāo de colocar copa</li>
        </ul>
    </div>
</div>

CSS:

.grid img{
    width: 450px;
    height: 450px;
    border: solid 1px rgb(235, 235, 235);
    border-radius: 3%;
    padding: 6px;
}

.grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    justify-items: center;
}

Answer 1

Both your img and div are equal width maintaining the correct gap between them. Your div's contents need to be justified left if you want to close that gap.

.text {
  justify-self: start;
}

Here is some more information: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self