如何在 CSS 中将框居中居中？

Question

I have created a box using div and have 4 more div inside it:

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

This is the output which I get:

I want to center the whole box to the center. I tried to use margin: 0px auto but it isn't working.

Kindly comment if more information is needed.

Answer 1

perhaps

.main__container {
    // other 
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    // other
}