justify-content não funciona | Fórum | School of Net

Deseja poder participar de nosso fórum e tirar todas as suas dúvidas?
Clique aqui e assine nosso plano de acesso ilimitado. Saiba mais.

por Laryssa

2 semanas, 2 dias atrás Laryssa

justify-content não funciona

Não entendo o por que ul { display: flex; justify-content: space-between; } não funciona como devia o justify-content não aplica o espaço entre os itens li. componente Header css ``` @import url("https://fonts.googleapis.com/css2?family=Rozha+One&display=swap"); header { display: flex; font-family: "Rozha One", serif; color: #fff; font-size: 2rem; } header .logo { z-index: 1; margin-left: 30px; } ul { display: flex; justify-content: center; } li { list-style-type: none; } ``` componente Header js ``` export default () => { return ( <header> <div className="logo">logo</div> <nav> <ul className="navbar"> <li>Logo</li> <li>logo</li> <li>Logo</li> </ul> </nav> </header> ); }; ``` Meu js do background que está recebendo ele. ``` import React from "react"; import "./style.css"; class Background extends React.Component { render() { return ( <div id="background"> <div id="circle"></div> <div id="header-item">{this.props.headerElement}</div> <div id="main-item">{this.props.mainElement}</div> <div className="card-item">{this.props.cardElement}</div> ``` Css do background ``` #background { position: absolute; background-color: #10131c; width: 100%; height: 350%; z-index: -2; } #circle { position: absolute; top: -100px; left: -50px; background-color: #10131c; height: 250px; width: 250px; border-radius: 50%; border: 3px solid #f9cf13; } /*Header*/ #header-item { margin-top: 10px; } ```

1 Respostas