Below is the CSS class I've created to ensure that all elements remain centered on the user's screen.
container: {
display: "flex",
position: "absolute",
top: 0,
left: 0,
height: "100%",
width: "100%",
alignItems: "center",
}
To widen my input box, I utilize a Box component:
<Box p={3} width="100%" className={classes.container}>
<div className={classes.container}>{children}</div>
</Box>
https://i.stack.imgur.com/zkSV1.png
However, when I increase the size of my input box,
https://i.stack.imgur.com/Ki0H2.png
the centering breaks and the input box shifts to the right!
Any suggestions on how I can extend the input box while maintaining center alignment?