I am trying to recreate this but can only produce this.

Setting the text size to 200 px creates massive margins above and below the text, and setting justifyContent and alignItems to “center” sets all items inline, but in the middle of a giant card, rather than tight together like my reference picture is.

I have messed with negative margins and padding, tried to encapsulate the text in different containers, tried MaterialUI typography… I’ve asked ChatGPT and BingAI and crawled through a hundred different StackOverflow posts and answers. What am I missing here? How can I remove the invisible margin on the text?

Here is the relevant code:

<Paper elevation={3} sx={{backgroundColor: "#00acec", height: '400px', width: '100%'}}>
        <Stack direction='row' justifyContent='center'>
          <Typography variant='overline' alignContent='center' sx={{ color: 'white', padding: 2}}>
            Your Amount
          </Typography>
        </Stack>
        <Stack display='flex' flexDirection='row' justifyContent='center' alignItems='center'>
            <IconAdd></IconAdd>
            <Box >
              <h1 style={{color: 'white', fontSize: '200px'}}>$15</h1>
            </Box>
            <IconAdd></IconAdd>
        </Stack>
      </Paper>