Strange layout using chakra ui in next.js

Hi I'm totally new in react and next.js, I try to explore the components with chakra UI. I'm using chakra ui in next.js project and I used the menu component provided by chakra ui, however the layout looks pretty strange and ugly and I couldn't figure out why it happens. Could anyone please tell what's wrong with my code?

current layout

I expect the layout should be like this

my Navbar.jsx

import Link from 'next/link';
import { Menu, MenuButton, MenuList, MenuItem, IconButton, Flex, Box, Spacer, MenuGroup } from '@chakra-ui/react';
import { FcMenu, FcHome, FcAbout } from 'react-icons/fc';
import { BsSearch } from 'react-icons/bs';
import { FiKey } from 'react-icons/fi';

const Navbar =()=>(
    <Flex p='2' borderBottom='1px' borderColor='black.1000'>
        <Box fontSize="3xl" color="black.300" fontWeight="bold">
            <Link href='/' paddingLeft='5'>Testing Name</Link>
        </Box>
        <Spacer/>
        <Box>
            <Menu isLazy colorScheme="black">
                <MenuButton as={IconButton} rightIcon={<FcMenu></FcMenu>} color='black'>Menu Item</MenuButton>
                <MenuList>
                    <Link href='/'>
                        <MenuItem icon={<FcHome/>}>Home</MenuItem>
                    </Link>
                    <Link href='/discussion/all' >
                        <MenuItem icon={<FcAbout/>}>Discussion</MenuItem>
                    </Link>
                    <MenuGroup title='venue'>
                    <Link href='/venue/search' passHref>
                        <MenuItem icon={<BsSearch/>}>Search</MenuItem>
                    </Link>
                    <Link href='/venue/search?purpose=for-sale' passHref>
                        <MenuItem icon={<FcAbout/>}>buy property</MenuItem>
                    </Link>
                    <Link href='/venue/search?purpose=for-rent' passHref>
                        <MenuItem icon={<FiKey/>}>rent property</MenuItem>
                    </Link>
                    </MenuGroup>
                    
                </MenuList>
            </Menu>
        </Box>
    </Flex>
)
export default Navbar;

my Layout.js

import Head from 'next/head';
import { Box } from '@chakra-ui/react';

import Navbar from './Navbar';
export default function Layout({ children }) {
  return (
    <>
      <Head>
        <title>Testing app</title>
      </Head>
      <Box maxWidth='1280px' m='auto'>
        <header>
          <Navbar />
        </header>
        <main>{children}</main>
        
      </Box>
    </>
  );
}

my _app.js

import  { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
import theme from '../styles/theme';
import '../styles/globals.css';
import CommonLayout from '../components/Layout';

function MyApp({ Component, pageProps }) {
    return (
        <ChakraProvider resetCSS={false}>
            <ColorModeScript initialColorMode={theme.config.initialColorMode}/>
            <CommonLayout>
                <Component {...pageProps} />
            </CommonLayout>
        </ChakraProvider>
    );
}

export default MyApp;

and the theme.js

// theme.js

// 1. import `extendTheme` function
import { extendTheme } from '@chakra-ui/react'

// 2. Add your color mode config
const config = {
  initialColorMode: 'light',
  useSystemColorMode: false,
  
}

// 3. extend the theme(which I just directly copy from chakra ui documentation)
const theme = extendTheme({ config })

export default theme