Chakra UI navbar width not showing 100%

[Surya]

App.tsx code
<Grid templateAreas={{
base: "nav" "main",
lg: "nav nav" "aside main",

}}>
  <GridItem area="nav" >
    <Navbar />
  </GridItem>

Navbar.tsx code
const Navbar = () => {
return (

        <Image src={logo} boxSize="60px" />
        <Text>Gamer Hub</Text>


    </HStack>
)

};

but i am not getting full width in any browser

Please help,Thanks

[jax]

That’s strange, I wonder where it is getting the extra padding and margin from. I have the same code but get a full width navbar…

[jax]

This what that part of my screen looks like in dev tools.The nav bar does show as fullwidth.
I guess there must be styles on the body applied from somewhere, but I don’t think its from chakra-ui, maybe another boilerplate stylesheet somewhere in the codebase?
PS. this is from the completed code so there are extra divs for the logo search etc in the screenshot