I've been trying to troubleshoot the issue with my header, but so far I haven't found a solution.
Could you please take a look at my code first?
// Code simplified for clarity, no need to worry about variables
const Header = () => {
return (
<header className={styles.headerContainer}>
<nav className={styles.navContainer}>
<h1>Frontend Quiz !</h1>
<p>{currentStage} / 10</p>
<Link to='/'>
<button type='button'>Quit</button>
</Link>
</nav>
</header>
)
}
export default Header
@use '/src/styles/constants/colors';
.headerContainer {
position: fixed;
width: 100%;
height: 60px;
padding-top: 20px;
color: colors.$TOPNAV;
background: colors.$WHITE;
.navContainer {
display: flex;
justify-content: space-around;
color: colors.$TOPNAV;
button {
font-size: 16px;
color: colors.$TOPNAV;
}
}
}
https://i.sstatic.net/nEdG8.png
Despite using display: flex and justify-content: space-around, it's not displaying correctly.
The 1 / 10 should be centered between the other two elements, but it's not working as expected.
If there's something I missed or if I'm doing something wrong, please point it out. Thanks!