Modal does not appear when in full screen but appears for small screen. How do I fix it?

Question

Everything works well on a small screen, however, when in a large screen, only the last card when clicked does the modal shows up. How do I fix it?

I recreated the problem: https://codesandbox.io/s/modest-bash-z3ffnq?file=/src/App.js

export default function App() {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  const [modalData, setModalData] = useState([]);

  return (
    <div className="App">
      <div style={{ padding: "5rem", flexGrow: 1 }}>
        <Grid
          container
          rowSpacing={1}
          columnSpacing={{ xs: 12, sm: 50, md: 50, lg: 50 }}
        >
          {listSample.map((elem) => (
            <Grid
              item
              xs={12}
              sm={6}
              md={4}
              lg={3}
              key={listSample.indexOf(elem)}
              style={{ marginBotton: "2rem" }}
            >
              <Card>
                <CardHeader title={elem.title} />
                <CardContent>
                  <button
                    onClick={() => {
                      setModalData(elem);
                      setModalIsOpen(true);
                    }}
                  >
                    click
                  </button>
                </CardContent>
              </Card>
            </Grid>
          ))}

          <Dialog open={modalIsOpen} onClose={() => setModalIsOpen(false)}>
            <DialogTitle>{modalData.title}</DialogTitle>
            <DialogContent dividers>
              <Typography gutterBottom>{modalData.description}</Typography>
            </DialogContent>
          </Dialog>
        </Grid>
      </div>
    </div>
  );
}

Answer 1

Somehow Grid is creating the issue, by having Grid component there is margin-left: -400px is getting applied so I have removed the Grid and attached the margin-left: 0px to parent Grid.

Here's the working solution .