Flexbox with h2 and button - html

Question

I am pretty new to React.js and flexbox, and I currently have a flexbox with both an h2 and a button that I want to center. Unfortunately, even when I put justify-content: center, margin: auto, and text-align center, the formatting is still now what I'm looking for. I also know that there must be something that I am missing, but I just don't know what right now. Any suggestions would be greatly appreciated.
<header className={styles.header}>
<div className={styles.spacing}></div>
<div className={styles.logoaccount}>
<img></img>
</div>
<div className={styles.spacing}></div>
<div className={styles.searchsearch}>
<h2>Japanese</h2>
<button>Search</button>
</div>
<div className={styles.spacing}></div>
<div className={styles.spacing}></div>
<div className={styles.spacing}></div>
<div className={styles.spacing}></div>
<div className={styles.filters}>
<button className="location">Location</button>
<button className="food-type">Food-type</button>
<button className="rate">Rate</button>
<button className="apply-filters">Apply-Filters</button>
</div>
*{
margin: 0;
padding: 0;
}
.header{
text-align: center;
}
.logoaccount{
width: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.logoaccount > button{
border-radius: 5px;
}
.filters{
width: 75%;
display: flex;
margin: auto;
justify-content: space-between;
}
.filters > button{
width: 15%;
}
.searchsearch{
width: 50%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.spacing{
height: 20px;
}
This is what I get:
however, I want the second line containing Japanese and "Search" to be centered. I tried all over to look for the solution but I unfortunately couldn't find anything. thanks so much!
Edit: background color for clarification.

Answer 1

Have you tried inspecting the page and using the Select Page Item tool (Ctrl+Shift+C) to see if the problem is visible?. If not, just like you did with .filters > button, try adding the width: 15% style (or try other percentages, like 50%) to the .searchsearch > button. Otherwise, maybe using the filters style instead of the searchsearch one in the div's className changes something that makes it work.