我是html和css的新手，下个月我将参加一个课程。但是现在我有一个项目要自己做，我需要把产品保持在屏幕大小以内。我该怎么做呢？
这是html：

<div class="product-container">
    <li *ngFor="let product of products">
    <div class="product-title">

            <h2>
                {{product.title}}
            </h2>
            <div class="product-details">
                <img id="productImage" src={{product.imageUrl}}>
                <div>
                    <p>Description:</p>
                    <p>{{product.description}}</p>
                </div>
                <div >
                    <p>Location: <span>Mock Location</span></p>
                </div>
    
            </div>
            
        </div>
    </li>

</div>

这是我目前拥有的CSS：

.product-container {
    display: flex;
    gap: 90px;
}
.product-container li{
    list-style: none;
}
#productImage{
    height: 250px;
    width: 350px;
}
.special-details{
    display: flex;
    justify-content: space-between;
    font-size: large;
}
.product-title{
    text-align: center;
}

这看起来有多糟

期待任何帮助和建议！谢谢