# Chakra UI navbar width not showing 100%

**URL:** <https://forum.codewithmosh.com/t/chakra-ui-navbar-width-not-showing-100/21343>\
**Category:** React\
**Created:** [July 8, 2023, 6:34pm UTC](https://forum.codewithmosh.com/t/chakra-ui-navbar-width-not-showing-100/21343 "2023-07-08T18:34:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Surya](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/surya/32/6618_2.png) [@Surya](https://forum.codewithmosh.com/u/Surya)\
**Post date:** [July 8, 2023, 6:34pm UTC](https://forum.codewithmosh.com/t/chakra-ui-navbar-width-not-showing-100/21343/1 "2023-07-08T18:34:05Z")

</div>

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)](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/a/ab5cd90d798f709f4eeb868dbcf14fa2dbb4d6e1.png)  
Please help,Thanks

---

<div class="post-metadata">

**Author:** ![jax](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@jax](https://forum.codewithmosh.com/u/jax)\
**Post date:** [July 9, 2023, 4:27pm UTC](https://forum.codewithmosh.com/t/chakra-ui-navbar-width-not-showing-100/21343/2 "2023-07-09T16:27:41Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![jax](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@jax](https://forum.codewithmosh.com/u/jax)\
**Post date:** [July 9, 2023, 4:41pm UTC](https://forum.codewithmosh.com/t/chakra-ui-navbar-width-not-showing-100/21343/3 "2023-07-09T16:41:02Z")

</div>

![Screenshot 2023-07-09 at 17.30.38](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/8/89016ecdbfef69b61ff06f15e971253485728499.png)  
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