React MUI Grid, Box Component - alignContent, justifyContent

Question

在附图中，在英雄部分我有2个疑惑。

1. 文本部分和图像部分之间的空间
2. 在左中心正确对齐文本部分

自从我发布了这个问题，我已经能够清楚地了解我对 FlexBox 属性的基本理解（在容器级别和项目级别）。我能够使用普通的 vanila Box 和 Stack 组件获得所需的结果

function Hero() {
  return (
//border is just for me to visualize the playground
    <Box height="auto" width="auto" border="4px solid black" p="8px" m="8px">
      <Stack
        direction={{ xs: 'column', md: 'row' }}
        display="flex"
        alignItems="center"
        justifyContent="space-evenly"
      >
        <Box display="flex">
          <Stack direction="column" display="flex" alignItems="flex-start">
            <Typography variant="h2" mb={1}>
              The most <br />
              Advanced Education
            </Typography>
            <Typography variant="body1" mb={2} width="800px">
              Choose out of 2500+ mentors. Trusted by 250k users. <br />
              Industry experts and top university professors Runs in a browser.
              Can be downloaded on desktop, tablet and mobiles. Extremely fast
              loading at 200ms. Updates work directory from the website.
            </Typography>
            <StaleBlueButton>Join Us</StaleBlueButton>
          </Stack>
        </Box>
        <Box display="flex">
          <img
            src={photoBanner}
            alt="Banner pic"
            height="500px"
            maxWidth="400px"
          />
        </Box>
      </Stack>
    </Box>
  );
}

我原本打算用Grid Component。还无法弄清楚。

import { Box, Grid, Typography } from '@mui/material';
import React from 'react';
import StaleBlueButton from './staleBlueButton';
import photoBanner from '../../src/assets/img/photo_banner.png';

function Hero() {
  return (
    <Box sx={{ padding: '20px', margin: '8px' }}>
      <Grid container justifyItems="space-between">
        <Grid item xs={12} md={7}>
          <Grid container>
            <Typography variant="h2" mb={1}>
              The most <br />
              Advanced Education
            </Typography>
            <Typography variant="body1" mb={2}>
              Choose out of 2500+ mentors. Trusted by 250k users. <br />
              Industry experts and top university professors Runs in a browser.
              Can be downloaded on desktop, tablet and mobiles. Extremely fast
              loading at 200ms. Updates work directory from the website.
            </Typography>
            <StaleBlueButton>Join Us</StaleBlueButton>
          </Grid>
        </Grid>
        <Grid item xs={12} md={5}>
          <Box>
            <img
              src={photoBanner}
              alt="Banner pic"
              height="500px"
              maxWidth="400px"
            />
          </Box>
        </Grid>
      </Grid>
    </Box>
  );
}

export default Hero;