Remove border around page

Question

I have this weird border around my entire page:

This is my App.js. The Home component has just ThemeProvider wrapper, and then everything is inside Paper component.

class App extends Component {
  render() {
    
    return (
      <ThemeProvider theme={theme}>
         <div>
          <NavBar></NavBar>
        </div>
        <Home></Home>
      </ThemeProvider>   
    );
  }
}
export default App;

Answer 1

Most browsers have a default user-agent stylesheet where some default styles are applied. You want to explicitly set body 's margin and padding to 0px:

body {
    margin: 0px;
    padding: 0px;
}

Answer 2

@khuynh has the right idea, however I'd suggest following Material-UI's recommendation to wrap your app in the CSSBaseline component instead of manually attempting to provide your own browser resets.