MUI Grid - align to end - css

Question

I'm relatively new to using MUI Grid, and am not trying to do anything too complicated, yet I haven't been able to find a solution on other posts or in the Flexbox/MUI docs. Essentially I just want to align my 'Cancel' and 'Save' buttons all the way to the right on the screen. Docs seem to make this look extremely simple, yet my page layout isn't affected. I've been trying alignItems, alignContent, justifyContent, etc. just to try and make it work - to no avail.
<Grid container xs={12} justify-content='flex-end'>
<Grid item xs={6}/>
<Grid item xs={3}>
<button
onClick={() => doSomething()}
Click here to cancel
</button>
</Grid>
<Grid item xs={3}>
<button
onClick={() => doSomething()}
Click here to Save
</button>
</Grid>
</Grid>

Answer 1

If you are using the Material-UI styled component. You could use the following styles definition below:
.myClass {
display: flex;
flex-direction: row;
justify-content: end;
align-items: flex-end;
}

Answer 2

It seems like the typing mistake with justify-content='flex-end' since it should be justifyContent="flex-end":
<Grid spacing={2} container xs={12} justifyContent="flex-end">
<Grid item xs={3}>
<Item>xs=3</Item>
</Grid>
<Grid item xs={3}>
<Item>xs=3</Item>
</Grid>
</Grid>
Working example
Also since you want to align items along just one horizontal direction you may want to use Stack rather than Grid. Stack is made for aligning items along the vertical or horizontal axis and won't create redundant for these cases DOM-elements(grid-item containers) :
<Stack direction="row" spacing={2} justifyContent="flex-end">
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
The example of UI generated by this snippet can be seen at the link above.