How to control the flexbox size in mui v5?

Question

Currently I have a code directly copying from mui v5 Card example, and I realized that the size of my flexbox is different from the mui example.

The mui example look like below. The image is pushed to the right side.

for me, the image remained in the middle. So I have applied a border to visualize the flexbox size, and I realized that the flexbox of my CardMedia does not follow his parent Card component. It look like this:

This is the code:

        <Card sx={{ display: 'flex', border: 4 }}>
          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
            <CardContent sx={{ flex: '1 0 auto' }}>
              <Typography component="div" variant="h5">
                Live From Space
              </Typography>
              <Typography variant="subtitle1" color="text.secondary" component="div">
                Mac Miller
              </Typography>
            </CardContent>
            <Box sx={{ display: 'flex', alignItems: 'center', pl: 1, pb: 1 }}>
              <IconButton aria-label="previous">
                {theme.direction === 'rtl' ? <SkipNextIcon /> : <SkipPreviousIcon />}
              </IconButton>
              <IconButton aria-label="play/pause">
                <PlayArrowIcon sx={{ height: 38, width: 38 }} />
              </IconButton>
              <IconButton aria-label="next">
                {theme.direction === 'rtl' ? <SkipPreviousIcon /> : <SkipNextIcon />}
              </IconButton>
            </Box>
          </Box>
          <CardMedia component="img" image={ablum} sx={{ width: 151, border: 4 }} alt="Live from space album cover" />
        </Card>

Actually, I faced this problem a lot that I cannot control the flexbox size. Has anyone got an idea how I can push the photo to far right using something like justifyContent: 'flex-end'? But before that, I believes I need to fix the flexbox size first. Feel free to leave a comment if you got an idea. Thanks.