How to remove space between edge of box and side of screen in Grommet

Question

I'm starting to learn Grommet (UX framework for React). Following their tutorial, I went on http://grommet.io/docs/hello-world to play around on CodePen (https://codepen.io/pen?template=gaEGPY&editors=0010).

I want to make a website that has a sidebar, so I decided to use the split component. To try it out, I replaced the code in <App></App> like so (the code they gave in the examples):

<App>
  <Split>
    <Box colorIndex='neutral-1'
      justify='center'
      align='center'
      pad='medium'>
      Left Side
    </Box>
    <Box colorIndex='neutral-2'
      justify='center'
      align='center'
      pad='medium'>
      Right Side
    </Box>
  </Split>
</App>

When I do this, the edge of the box won't reach the edge of the screen. It always leaves some space between the end of the box and the side of the screen.

Essentially, I want the blue part to take up the entire left half of the screen (stretch to the end of the screen) and not just stop at some arbitrary place (it doesn't do this in the examples). How do I do this in Grommet?

Answer 1

If you remove the App component, you should be able to achieve the result you want. It seems to have padding built in.