Quiero mover en mi barra de navegación una lista a la derecha, como lo indica la imagen a continuación

Imagen

Mi navbar.js: la clase es navbar-links

 import React from "react"; import "./Navbar.css"; const Navbar = ({ isScrolling, information }) => { const toTheTop = () => { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); }; return ( <nav className={`navbar ${isScrolling > 20 ? "scrolling" : null}`}> <div className={`navbar-logo ${ isScrolling > 20 ? "scrolling-logo" : null }`} onClick={toTheTop} > <p>{information.name}</p> </div> <div className={`navbar-links box ${ isScrolling > 20 ? "scrolling-links" : null }`} > <ul> {information.directions.map((direction) => ( <li key={direction.key}> <a href={direction.url}>{direction.name}</a> </li> ))} </ul> </div> </nav> ); }; export default Navbar;

mi Navbar.css: ya intenté usar display: flex; align-items: center; justify-content: flex-end; Pero no funciona

 .navbar { display: flex; position: fixed; top: 0; background-color: transparent; width: 100%; height: 80px; font-size: 20px; z-index: 1; } .scrolling { background-color: #000; transition: all 0.5s ease; } .navbar-logo { display: flex; align-items: center; padding-left: 50px; color: #000; cursor: pointer; } .scrolling-logo { color: #fff; transition: all 0.5s ease; } /* here is the div of my list */ .navbar-links { display: flex; align-items: center; justify-content: flex-end; } .navbar-links > ul { display: flex; flex-direction: row; list-style: none; } .navbar-links > ul > li { padding: 0 5% 0 5%; } .navbar-links > ul > li > a { color: #000; } .navbar-links > ul > li > a:hover { color: #d4d4d4; } .scrolling-links > ul > li > a { color: #fff; transition: all 0.5s ease; }

para ver mi código de mi proyecto visita mi repositorio https://github.com/Michael-Liendo/michaelliendo.com