I am facing an issue with centralizing the content properly. Despite using justify-content:center, the layout breaks.
https://i.sstatic.net/EMiw1.png
When I apply justify-content:center, the layout appears like this:
https://i.sstatic.net/lTJRi.png
Here is the HTML / JSX code snippet:
<div className={styles.contentBodyTab}>
<div className={styles.containerBrands}>
{data.map((item) => (
<div className={styles.brand} />
))}
</div>
</div>
And the corresponding CSS (SASS) code:
.contentBodyTab {
background: red;
}
.containerBrands {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.brand {
background: chartreuse;
margin: 2px;
width: 190px;
height: 130px;
}