How to reduce the Gap space

Question

in below grid container , there is an image on the left , with a bunch of text on the right , there is a huge gap between the image and the text which tried to reduce with different method but didnt work , any advice on how it can be done?

<Grid
          item
          container
          xs={6}
          spacing={1}
          justifyContent="center"
          alignItems="center"
        >
          <Grid item xs={3} />
          <Grid item xs={3}>
            <img src={staff1} alt="staff" />
          </Grid>
          <Grid item xs={5}>
            <Typography variant="caption" color="primary">
              Maecenas fermentum sit amet urna vel porttitor. Mauris bibendum
              volutpat ultricies.
            </Typography>
            <Typography
              variant="body1"
              color="primary"
              style={{ marginTop: "1.5rem" }}
            >
              JOHN CLICK
            </Typography>
            <Typography variant="caption" color="primary">
              Marketing Director
            </Typography>
          </Grid>
          <Grid item xs={1} />
        </Grid>
        
        </Grid>

Answer 1

About your question, I try to improve your code, so there is no huge gap between the image and the text now. I provide the code snippet that you can try.

<Grid item container xs={6} spacing={1} justifyContent="center" alignItems="center">
    <Grid item>
        <img src={staff1} alt="staff" />
    </Grid>
    <Grid item>
        <Typography variant="caption" color="primary">
            Maecenas fermentum sit amet urna vel porttitor. Mauris bibendum
            volutpat ultricies.
        </Typography>
        <Typography
            variant="body1"
            color="primary"
            style={{ marginTop: "1.5rem" }}
        >
            JOHN CLICK
        </Typography>
        <Typography variant="caption" color="primary">
            Marketing Director
        </Typography>
 </Grid>
</Grid>