Search code examples
reactjsmaterial-uiwidth

How do I extend the width of the header to the whole screen?

Problem:

There is a white border around the header. How do I extend the header to the edge of the browser?

What I've tried:

I've tried adding width={1} to the makeStyles and into the <Box> component. Neither fixed the issue. Interestingly, the AppBar extends to the ends of the browser.

Any thoughts on how to extend the header and remove the white border that's around the header? I added an image below for clarity. Thank you.

Code base

enter image description here

Solution

  • There is a margin of 8px around the body. enter image description here Remove that margin and it would solve the issue.

    Working Demo: https://codesandbox.io/s/quiet-wave-4t9vn

    html,
body {
  margin: 0;
  /*optional css below*/
  padding: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}