Full Width Material-UI Grid not working as it should

Best practice is to test out all break points and specify the allocation of space for each screen width.

<Grid item xs={12} sm={12} md={12} lg={6} xl={4}>

</Grid>

xs, extra small 0px

sm, small: 600px

md, medium: 960px

lg, large: 1280px.

xl,extra-large: 1920px

https://material-ui.com/customization/breakpoints/

xs Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority.

sm Defines the number of grids the component is going to use. It's applied for the sm breakpoint and wider screens if not overridden.

md Defines the number of grids the component is going to use. It's applied for the md breakpoint and wider screens if not overridden.

(and so forth) more here: https://material-ui.com/api/grid/

I suspect the Container component is causing you problems. Since you haven't linked its implementation, see below for a working example of what you want.

Since Material uses flexbox they make use of property flexGrow

The flex-grow CSS property specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up. The flex grow factor of a flex item is relative to the size of the other children in the flex-container.

This is the property that governs the growth of elements in the grid.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';

const styles = theme => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing.unit * 2,
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
});

function CenteredGrid(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
        <Grid container spacing={24}>
          <Grid item xs={12} sm={6}>
            <Paper>xs=12 sm=6</Paper>
          </Grid>
          <Grid item xs={12} sm={6}>
            <Paper>xs=12 sm=6</Paper>
          </Grid>
        </Grid>
    </div>
  );
}

CenteredGrid.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CenteredGrid);