title: Root div padding React (Styled Components)
body: <p>I have a simple React App, using Redux's <code>Provider</code> to wrap my <code>App</code> component. </p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import styled from 'styled-components';
  import { Provider } from 'react-redux';
  import App from './App';
  import store from './store';
  import registerServiceWorker from './registerServiceWorker';
  
  const MainContainer = styled.div`
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: red;
  `;
  
  ReactDOM.render(
    &lt;MainContainer&gt;
      &lt;Provider store={store}&gt;
        &lt;App /&gt;
      &lt;/Provider&gt;
    &lt;/MainContainer&gt;,
    document.getElementById('root'),
  );
  
  registerServiceWorker();
  </code></pre>
  
  <p>However, when this app renders, there's a white gap around the edge (all sides) of the screen. What's the correct way to override the body tag so that the <code>App</code> content goes to the edge of the screen?</p>
  
  <p><a href="https://i.stack.imgur.com/kEpWt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kEpWt.png" alt="White Margin should not be there."></a></p>