title: How to use Material-UI Grid for SPA (negative margin problem)
body: <p>I'm trying to use only <code>Grid</code> to create a SPA. I'm used to material-ui <code>Grid</code> and use it a lot, however in my new project I'm not sure what I'm doing wrong.</p>
  <p>Right now this is the problem:</p>
  <p><a href="https://i.stack.imgur.com/mObnC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mObnC.png" alt="margin right" /></a></p>
  <p>There is a margin on the right side and a horizontal scrollbar.</p>
  <p>I know about the negative margin limitation, but if I apply a padding to the parent element (as the documentation says), then my <code>Grid</code> element loses the full width functionality:</p>
  <p><a href="https://i.stack.imgur.com/nyBNE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nyBNE.png" alt="using padding" /></a></p>
  <p>The horizontal scrollbar goes away, but then I have a padding on my elements, and if I set a <code>background color</code> in one of these elements, it doesn't apply to the full width, because there is a padding.</p>
  <p>Using the <code>overflow-x: hidden</code> adds a second vertical scrollbar, and it seems I have to scroll two times vertically to scroll the page.</p>
  <p>The only solution is using <code>Grid spacing={0}</code>, but then I don't get the spacing between sections and <code>Grid</code> containers inside sections also can't use <code>spacing</code>.</p>
  <p>And example of what I'm implementing is in this codesandbox: <a href="https://codesandbox.io/s/competent-volhard-e5yls?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/competent-volhard-e5yls?file=/src/App.js</a></p>
  <p>My doubt is, what would be the best solution to have only a single page, and sections separating it. Ideally using one of the material-ui components.</p>
  <p>Thanks a lot!</p>