I’m very new to MUI, and there are things that I don’t get why they’re not working the way I want.
I know that some components like <Grid item> have their default padding-top and padding-left, but the padding-left even thou is there; it seems like it is not working, so I need to add extra padding manually to the <Grid container> or to the item itself, here is a simple code example:

<Grid container direction={'column'}>
    <Grid item>
        <Typography variant="h1">This is a ReactJS App</Typography>
    </Grid>
    <Grid item>
        <Grid container direction="column" spacing={5}>
            {arr.map((elem, index) => {
                return (
                    <Grid item key={index.toString()}>
                        <ActivitySkeleton/>
                    </Grid>
                );
            })}
        </Grid>
    </Grid>
</Grid>

Which will make the items be all the way to the left and not respect their default padding-left value.

Once I add a p prop to the <Grid container direction="column" spacing={5} p={4}> then I can see some padding from the items thanks to adding extra padding to the container, which I think it should not be necessary.

I’m trying to use only these components to minimize imports and other things. If there is no way to achieve what I want with only Grid component, I will 100% use what the MUI library offers me.

I haven’t try other components as I want to know why this is happening and the docs don’t help me find the problem or a better solution.