title: How to make React Material UI <Grid> 100% width
body: <p><a href="https://i.stack.imgur.com/CIYrE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CIYrE.png" alt="enter image description here" /></a></p>
  <p>I am trying to make this Grid component width 100% so it covers the whole screen width.</p>
  <h1>Javascript file</h1>
  <pre><code>import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import Paper from '@material-ui/core/Paper';
  import Grid from '@material-ui/core/Grid';
  import './CodingTest.css';
  
  const useStyles = makeStyles((theme) =&gt; ({
    grid: {
      height: '100%',
      margin: '0px',
    },
    paper: {
      padding: theme.spacing(2),
      textAlign: 'center',
      color: theme.palette.text.secondary,
      background: theme.palette.success.light,
      height: '100%',
    },
  }));
  
  export default function CodingTest() {
    const classes = useStyles();
  
    return (
      &lt;div&gt;
        &lt;Grid container className={classes.grid}&gt;
          &lt;Grid item xs={12} md={6}&gt;
            &lt;Paper className={classes.paper}&gt;1&lt;/Paper&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>Here is my .css file where I've managed to make it full width to the right but there still remains padding on the left as you can see from the picture above</p>
  <h1>CSS</h1>
  <pre><code>* {
    min-width: 100%;
  }
  
  .MuiContainer-root .MuiContainer-maxWidthLg {
    margin: 0px;
    padding: 0px;
    border: 0px;
    min-width: 100%;
  }
  
  @media (min-width: 600px) {
    .MuiContainer-root .MuiContainer-maxWidthLg {
      margin: 0;
      padding: 0;
      border: 0;
      min-width: 100%;
      max-width: 100%;
    }
  }
  
  @media (min-width: 1280px) {
    .MuiContainer-root .MuiContainer-maxWidthLg {
      margin: 0;
      padding: 0;
      border: 0;
      min-width: 100%;
      max-width: 100%;
    }
  }
  </code></pre>