I`m new to html and css and I will be taking a course in it next month. However right now I have a project to do by myself and I need to keep the products inside the screen size. How can I do this?

This is the html :

<div >
    <li *ngFor="let product of products">
    <div >

            <h2>
                {{product.title}}
            </h2>
            <div >
                <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>

This is the css I have so far :

.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;
}

This is how bad it looks :

Looking forward for any help and advice! Thanks

CodePudding user response：

The gap css property is pushing them out of the productContainer. If you need to preserve the width of the images use this:

 .product-container {
    display: flex;
    gap: 90px;
    flex-wrap:wrap; // this is added
}