How do I align a Material UI table to the left in my React app?

Question

Problem Description

I have a React app that I am building using create-react-app and Material UI. I have a MUI table that I want to line up on the left of my page but I cannot seem to get it there without using the margin-left CSS property within App.css or marginLeft in a MUI theme override in theme.js, which looks good when the browser window is maximized but breaks responsiveness when I reduce the size of the browser window. Is there a specific Material UI theme override or better CSS rule I can use to make this work?

Desired Behavior

Table aligned to the left (requiring responsiveness with the same result with shrunken browser window):

Actual Behavior

Table alignment looks bad when browser window is shrunken (table too far to the left and cut off):

Code

App.css (.endpoint-table is relevant class, a div I'm wrapping the MUI Table component in):

.App {
  text-align:left;
}

.App-logo {
  height: 20vmin;
  pointer-events: none;
  margin-top: 5%;
  margin-bottom: 2%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.centered-text {
  text-align: center;
}

.endpoint-table {
  /* endpoint table is centered without any CSS rule here */
  margin-left: -19rem;
}

.home-content {
  text-align: center;
}

.img-anchor {
  display: inline-block;
}

.main-paper-content {
  margin-left: 2em;
  text-align: left;
}

.request-image {
  max-width: 50%;
}

.title {
  margin-bottom: 50%;
  text-align: center;
}

/* get rid of border bottom on buttons on home page and logo anchor, consider applying relevant classes */
a {
  border-bottom: 1px solid;
  text-decoration: none;
}

a:hover {
  border-bottom: 2px solid;
}

code {
  text-align: left;
  background-color: beige;
  display: inline-block;
  line-height: 1.3;
  padding: 0.15em;
}

nav a {
  text-decoration: none;
  border-bottom: 0px;
  color:black;
  padding: 0.5rem 0.1rem;
  margin: 0.5rem 0.9rem;
  float: center;
  text-align: center;
}

/* Get the bottom line to appear thicker below the hovered link */
nav a:hover {
  border-bottom: 0.3rem black solid;
  margin: 0.5rem 0.9rem;
}

EndpointTable.js (React component):

import * as React from 'react';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import '../Components/App/App.css'

// Make endpoints conform to `code` style
// Move the table to the left

function createData(name, description) {
  return { name, description };
}

const rows = [
  createData('/active_platforms', 'Active platforms'),
  createData('/active_platforms/oil_gas'),
  createData('/biodiesel'),
  createData('/electric_grid', 'All DC power lines, and all AC power lines from under 100kv-735kv. Contains the same information seen in all following electric grid endpoints.'),
  createData('/electric_grid/dc', 'All DC power lines.'),
  createData('/electric_grid/under_100', 'All AC power lines unknown and under 100kV.'),
  createData('/electric_grid/100_300_kV_AC', 'All AC power lines 100-300kV.'),
  createData('/electric_grid/345_735_kV_AC', 'All AC power lines 345-745kV.'),
  ...
];

export default function EndpointTable() {
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell align='left'><strong>Endpoint</strong></TableCell>
            <TableCell align='left'><strong>Description</strong></TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow align='center'
              key={row.name}
              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
            >
              <TableCell component="th" scope="row" align='left'>
                {row.name}
              </TableCell>
              <TableCell align='left'>{row.description}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

endpoints.js (where the EndpointTable component is rendered):

import * as React from 'react'
import { Paper } from "@material-ui/core"
import NavBar from "../Components/NavBar"
import Typography from '@material-ui/core/Typography';
import Container from '@material-ui/core/Container';
import '../Components/App/App.css'
import EndpointTable from '../Components/EndpointTable';

export default function Endpoints() {
    return (
        <main>
            <Container maxWidth="xl" className="App">
                <Paper>
                    <NavBar/>
                    <br/>
                    <Typography variant="h4" component="h1" gutterBottom className="title">
                        Energy Infrastructure API
                    </Typography>
                    <br/>
                    <Container>
                        <Paper elevation={12}>
                            <div className='main-paper-content'>
                                <Typography variant="h5" component='h2'>
                                    Endpoints
                                </Typography>
                            </div>
                            <Container maxWidth="sm">
                                <div className='endpoint-table'>
                                    <EndpointTable></EndpointTable>
                                </div>
                            </Container>
                        </Paper>
                    </Container>
                </Paper>
            </Container>
        </main>
    )
}

theme.js (currently no overrides set for MUI Table components):

import { red } from '@material-ui/core/colors';
import { createMuiTheme } from '@material-ui/core/styles';
// A custom theme for this app
const theme = createMuiTheme({
  palette: {
    type: 'light',
    primary: {
      main: '#61dafb',
      light: '#61dafb',
      dark: '#21a1c4',
    },
    secondary: {
      main: '#b5ecfb',
      light: '#61dafb',
      dark: '#21a1c4',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#282c34',
    },
  },
  overrides: {
    MuiPaper: {
      root: {
        padding: '20px 10px',
        margin: '10px',
        backgroundColor: '#fff', // 5d737e
      },
    },
    MuiButton: {
      root: {
        margin: '5px',
      },
      contained: {
        boxShadow: 'none',
        margin: '0.5em 0.5em',
      }
    },
    // This has the same effect as adding margin-left: -19rem to the .endpoint-table div
    // in App.css
    // MuiTableContainer: {
    //   root: {
    //     marginLeft: '-19rem'
    //   }
    // }
});
export default theme;

Update

I have managed to improve responsiveness somewhat by adding several media queries but this doesn't seem like the right approach... It is clunky and the ranges don't seem right but I'm not sure what else to do. See the following additions to App.css:

@media screen and (max-width: 1400px) and (min-width: 1301px) {
  .endpoint-table {   
    margin-left: -18rem!important;
  }
}

@media screen and (max-width: 1300px) and (min-width: 1201px) {
  .endpoint-table {   
    margin-left: -16rem!important;
  }
}

@media screen and (max-width: 1200px) and (min-width: 1101px) {
  .endpoint-table {   
    margin-left: -15rem!important;
  }
}

@media screen and (max-width: 1100px) and (min-width: 1001px) {
  .endpoint-table {   
    margin-left: -12rem!important;
  }
}

@media screen and (max-width: 1000px) {
  .endpoint-table {   
    margin-left: 0px!important;
  }
}