I have a list of items that I want to be displayed with 6 on the top and 7 on the bottom. However items that longer words are not being centrally aligned.
This is currently what it looks like.
As you can see Outcome/KPI is not centrally aligned but others are.
[![enter image description here][1]][1]
This is currently my code
<div className="innerTabs"> {Object.values(title).map((item, index) => { return (<h1 className={color === index ? "activate" : "inactive"} onClick={() => { setPage(index); setColor(index); }}> {""} {item}{""}</h1> ); })}</div>.innerTabs { display: flex; flex-wrap: wrap; justify-content: center;}.innerTabs h1 { flex: 0 0 calc(16.66% - 20px); color: white; display: flex; align-items: center; justify-content: center;}.innerTabs h1:hover { color: lightgray; cursor: pointer;}#contractNotes { width: 300px;}h1.activate { color: #6610f2; background: var(--light-opacity-color-primary-primary-16, rgba(115, 103, 240, 0.16)); border-radius: 26px; margin: 10px 0 10px 0; font-weight: 600;}h1.activate:hover { color: #6610f2; background: var(--light-opacity-color-primary-primary-16, rgba(115, 103, 240, 0.16)); border-radius: 26px; margin: 10px 0 10px 0; font-weight: 600;}h1.inactive { color: black; margin: 10px 0 10px 0;}