Chakra-UI navbar is not going full screen in React? Its stuck at the left side

Question

I am trying to get this the navbar look like this:

But I am instead getting this:

How do I make it full screen? My code look like this for now:

import {Grid, GridItem} from "@chakra-ui/react";

function App() {
    return (
    <Grid templateAreas={{
        base: `"nav" "main"`,
        lg: `"nav nav" "aside main"`
    }}>
        <GridItem area='nav' bg='coral'>Nav</GridItem>
        <GridItem area='aside' bg='gold'>Aside</GridItem>
        <GridItem area='main' bg='dodgerblue'>Nav</GridItem>
    </Grid>
    )}

export default App

Answer 1

Try to add width prop with full or 100vw value of your Grid component.