Tengo problemas para averiguar qué está mal con mi encabezado, sin embargo, aún no he encontrado ninguna idea.

Por favor revise mi código primero.

 // 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; } } }

Como puede ver, incluso utilicé display: flex y justify-content: space-around , no funciona correctamente.

Como sé, 1 / 10 debería estar en el centro de otras dos etiquetas, sin embargo, no funciona.

Si me equivoco o me falta algo, por favor háganmelo saber.