Home Can't get to make my Navbar items be in one line, they're stacked up and stuck on the left. ReactJS MUi5

Questions

Can't get to make my Navbar items be in one line, they're stacked up and stuck on the left. ReactJS MUi5

April 28, 2023

I have a logo on my left. I want to have my Navbar items (NavLink) to be horizontally spaced out and in one line, currently they’re stuck on the right side and on top of each other.
Here’s the code:

import React from "react";
import { Toolbar, Typography } from "@mui/material";
import { styled } from '@mui/material/styles'
import { NavLink } from "react-router-dom";
import Logo from '../assets/travelLogo.png'

const NavigBar = styled(Toolbar)(({theme}) =>({
  backgroundColor: theme.palette.background.default,
  display: 'flex',
  justifyContent: 'space-between',
  textAlign: 'center',
}));
const NavigTypo = styled(Typography)(({theme}) => ({
    display: 'flex',
    justifyContent: 'space-between',
    color: "white",
}));
function Navbar(){
    return(
        <NavigBar>
            <img src={Logo} alt="logo"/>
            <div>
              <NavLink to="/">
                  <NavigTypo variant="h5" >
                      HOME
                  </NavigTypo>
              </NavLink>
              <NavLink to="/info">
                  <NavigTypo variant="h5" >
                      INFO
                  </NavigTypo>
              </NavLink>
              <NavLink to="/contact">
                  <NavigTypo variant="h5" >
                      CONTACT US
                  </NavigTypo>
              </NavLink>
            </div>
        </NavigBar>
    )
}

export default Navbar;

>Solution :

You are styling with display: flex; NavigBar and not its div child which contains all the links.

const NavigBar = styled(Toolbar)(({theme}) =>({
  backgroundColor: theme.palette.background.default,
  display: 'flex',
  justifyContent: 'space-between',
  textAlign: 'center',
  '& div': {
    display: flex;
  }
}));