How do I make Material UI container have full width and height?

Question

I am trying to wrap a page in a React project in a Material UI container but it squeezes in all my content with these weird margins. Here is what it looks like:

But I want it to look like this with full width:

Haven't been able to find any other resources explaining how to change the width of the container. Does anyone have any workarounds? I tried adjusting the width of the container to be 100vw but it was unresponsive to my CSS. Here is my code:

////BUY PAGE

import React from 'react';

import Container from '@mui/material/Container';
import AppBar from '../../components/AppBar/AppBar';
import Footer from '../../components/Footer/Footer';

import './Buy.css';

const Buy = () => {
    return (
        <Container>
            <AppBar />
            <Footer />
        </Container>
    );
};

export default Buy;

////CSS

.buy-container {
    overflow-y: hidden;
    width: 100vw;
}

Answer 1

You should be able to get the results you're looking for by setting the maxWidth property of Container to false e.g:

<Container maxWidth={false}>
  <AppBar />
  <Footer />
</Container>

The maxWidth property determines the max-width of the container. The container width grows with the size of the screen. By setting it to false you can disable the maxWidth property.

MUI Container