Chakra UI navbar width not showing 100%

React
1

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

Screenshot (2)
Screenshot (2)1920×804 49.7 KB

Please help,Thanks

2

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…

3

Screenshot 2023-07-09 at 17.30.38
Screenshot 2023-07-09 at 17.30.381336×724 140 KB

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