How to add margin padding to a Navbar made by material UI?-CodePudding

Hi I have implemented buttons in my Navbar. This is coming from Mui .But after implementing them everything is static no matter what i do the margin or padding wont change. I am trying to create some space between them Navbar.js

import { useContext } from "react";
import { Cont } from "../Cont";
import "./stylingfolder/Navbar.css";

import { Button } from "@mui/material";
function Navbar(){
  const {setUser}=useContext(Cont)
  function handleLogoutClick() {
    fetch("/logout", { method: "DELETE" }).then((r) => {
      if (r.ok) {
        setUser(null);
      }
    });
  }
   

       return( <>
   
   <nav className="navstyle">
  
<Button className="lb" href="/about" variant="contained">About</Button>
<Button className="lb" href="/restaurants" variant="contained">Explore</Button>
<Button  className="lb" href="/myreservations" variant="contained">My Reservations</Button>
<Button className="lb" href="/blogs" variant="contained">Blogs</Button>
<Button className="lb" variant="contained" size="large" onClick={handleLogoutClick}>
        Logout
        </Button>
  


</nav>

Navbarcss

.navstyle{
    background-color: rgb(19, 18, 18);

}
.navstyle lb{
    margin-top: 12%;
}

CodePudding user response：

You have a small mistake in the selector here

.navstyle lb{
    margin-top: 12%;
}

It should be

.navstyle .lb{
    margin: 12px;
}