I'm new to utilizing the MUI Grid system and I am currently trying to accomplish a simple task of aligning my 'Cancel' and 'Save' buttons all the way to the right on the screen. Despite browsing through various posts and documentation related to Flexbox/MUI, I have not been able to find a solution. The process seems straightforward according to the docs, but it is not impacting the layout of my page. I have experimented with alignItems, alignContent, justifyContent, etc. in an attempt to make it work, but without success.
<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>