I'm having trouble figuring out what is wrong with my header, however haven't found any idea yet.
Please check my code first.
// I simplified the code, so no need to worry about variables or etc.
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;
}
}
}
As you can see, even I used display: flex
and justify-content: space-around
, it is not working properly.
As I know, 1 / 10
should be at center of other two tags, However doesn't work.
If I'm wrong or missing something, please let me know.
hope i can help.
The element you're trying to space around the way your code is, is the Paragraph and all the buttons inside.
Validate if your structure shouldn't be similar to this:
<div className="spaceAroundClass">
<h1>Frontend Quiz !</h1>
<div>Element on Middle</div>
<div>Buttons Container</div>
</div>