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.