I have constructed a container using div and included 4 additional div elements inside:
HTML:
<div className='main__container'>
<div className='item'>Image</div>
<div className='item'>Name</div>
<div className='item'>Price</div>
<div className='item'>Quantity</div>
</div>
CSS:
.main__container {
position: relative;
text-align: center;
margin: 0px auto;
display: flex;
background-color: white;
}
.item:not(:last-child) {
margin-right: 100px;
}
The resulting layout is depicted here:
I am attempting to align the entire box in the middle of the page. Although I attempted to use margin: 0px auto, it did not produce the desired outcome.
Please share your thoughts if more details are necessary.