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.
espero poder ayudar
El elemento que está tratando de espaciar alrededor de la forma en que está su código es el Párrafo y todos los botones dentro.
Valida si tu estructura no debe ser similar a esta:
<div className="spaceAroundClass"> <h1>Frontend Quiz !</h1> <div>Element on Middle</div> <div>Buttons Container</div> </div>