-2

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:

react_error

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.

Aditya Dixit
  • 255
  • 2
  • 12
  • `margin:auto` won't work on a 100% wide div – Paulie_D Jun 24 '22 at 15:43
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) – Paulie_D Jun 24 '22 at 15:45
  • Read answers of [this question](https://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally)! Hope, you will find each of them useful. You can also read [this article of freecodecamp](https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/) – Abir Sheikh Jun 24 '22 at 15:46
  • @AbirSheikh, I followed the stackoverflow answer got it working – Aditya Dixit Jun 27 '22 at 10:56

1 Answers1

0

perhaps

.main__container {
    // other 
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    // other
}
Sarah
  • 354
  • 1
  • 12
  • Please read [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). While this code block may answer the OP's question, this answer would be much more useful if you explain how this code is different from the code in the question, what you've changed, why you've changed it and why that solves the problem without introducing others. – Saeed Zhiany Jun 25 '22 at 13:48