Material tailwind react Navbar component having extra padding around it

navbar have extra few pixel of padding When I use Tailwind CSS Navbar - React from material tailwind react library (https://www.material-tailwind.com/docs/react/navbar#navbar) ,there is extra padding around it. I keep other files remain unchanged (using typescript) as when I initiate the app.

topnav.tsx:

import React from "react";
import {
Navbar,
Typography,
} from "@material-tailwind/react";
export function CustomNavbar() {
const [openNav, setOpenNav] = React.useState(false);
React.useEffect(() => {
window.addEventListener(
"resize",
() => window.innerWidth >= 960 && setOpenNav(false)
);
}, []);
const navList = (
<ul className="mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-normal"
>
<a href="#" className="flex items-center">
Pages
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-normal"
>
<a href="#" className="flex items-center">
Account
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-normal"
>
<a href="#" className="flex items-center">
Blocks
</a>
</Typography>
<Typography
as="li"
variant="small"
color="blue-gray"
className="p-1 font-normal"
>
<a href="#" className="flex items-center">
Docs
</a>
</Typography>
</ul>
);
return (
<div className="">
<Navbar className="sticky top-0 z-10 h-max max-w-full rounded-none bg-blue-gray-600">
<div className="flex items-center justify-between text-blue-gray-900">
<Typography
as="a"
href="#"
className="mr-4 cursor-pointer py-1.5 font-medium"
>
Material Tailwind
</Typography>
<div className="flex items-center gap-4">
<div className="mr-4 hidden lg:block">{navList}</div>
</div>
</div>
</Navbar>
</div>
);
}

todo.tsx: (where I call my navbar)

import { useEffect } from 'react';
import '../styles/checkbox.css'; 
import TodoListComponent from '../components/todo-list';
import todoList from '../data/mock-data/todolist.json';
import Sidebar from '../components/sidebar';
import '../styles/sidebar.css';
import { usePagePadding } from './function/pagePadding';
import { CustomNavbar } from '../components/topnav';
// redux
import type { RootState } from '../redux/store';
import { useSelector, useDispatch } from 'react-redux';
import { onSidebarChange } from '../redux/sidebar';
import { onMousePositionChange } from '../redux/mousePosition';
function Todo() {
// redux
const pagePadding = useSelector((state: RootState) => state.pagePadding.value);
const sidebar = useSelector((state: RootState) => state.sidebar.value);
const mousePositionX = useSelector((state: RootState) => state.mousePosition.x);
const mousePositionY = useSelector((state: RootState) => state.mousePosition.y);
const dispatch = useDispatch();
const toggleSidebar = () => {
dispatch(onSidebarChange(!sidebar));
};
usePagePadding();
useEffect(() => {
const handleMouseMove = (event: MouseEvent) => {
dispatch(onMousePositionChange({ x: event.clientX, y: event.clientY }));
};
window.addEventListener('mousemove', handleMouseMove);
return () => {
window.removeEventListener(
'mousemove',
handleMouseMove
);
};
}, []);
const pageContentStyle = {
paddingLeft: `${pagePadding}rem`,
paddingRight: `${pagePadding}rem`,
};
return (
<div>
<CustomNavbar />
<div className={`page-container ${sidebar ? 'ml-80' : ''}`}>
{/* <button onClick={toggleSidebar}>Toggle</button> */}
{/* {sidebar && <Sidebar />} */}
<div className='pt-padding-heading1' style={pageContentStyle}>
<h1 className="text-3xl font-bold">
Task
</h1>
<div className='pt-padding-component-medium'></div>
{todoList['todolist'].map((title, index) => (
<TodoListComponent key={index} title={title} index={index}/>
))}
</div>
</div>
</div>
);
}
export default Todo;

App.tsx:

import React from 'react';
import Todo from './pages/todo';
function App() {
return (
<div className='font-body'>
<Todo />
</div>
);
}
export default App;

index.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import { store } from './redux/store';
// @material-tailwind/react
import { ThemeProvider } from "@material-tailwind/react";
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<ThemeProvider>
<Provider store={store}>
<App />
</Provider>
</ThemeProvider>
</React.StrictMode>
);
reportWebVitals();

extra info: I'm using edge to view.
Any suggestions?

Please tell me which setting causing this.

The <Navbar> component has a 1px white border around it by default. You can customize component styles by pass in your own theme object to <ThemeProvider>. For example, to remove the border completely:

const theme = {
  navbar: {
    styles: {
      base: {
        navbar: {
          blurred: {
            borderWidth: '',
          },
        },
      },
    },
  },
};
…
<ThemeProvider value={theme}>

Please find a full working example on StackBlitz.