I'm struggling with aligning the box containing user info to the right edge of my MUI App bar. It seems to be stuck at the end of the last box instead of going all the way to the right. Can anyone help me achieve this? https://i.stack.imgur.com/uJ1on.png
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<div id="app-bar-box" style={{ width: "100%", display: "flex" }}>
<Box id="logo-env-txt-box" justifyContent="left" style={{ display: "flex", alignItems: "center" }}>
<a href="/home">
<SVGLOGO className="logo_stack" />
<SVGLOGOHORI className="logo" />
</a>
<Typography className={classes.envFlag} hidden={hidden}>
You are on the {process.env.REACT_APP_ENVIRONMENT} environment. Click{" "}
<a href="">here</a> to go to production.
</Typography>
</Box>
<Box id="user-info-box" justifyContent="right" style={{ display: "flex", alignItems: "center", width: "400px", height: "64px" }}>
<i class="dds__icon dds__icon--user" style={{ fontSize: "24px", color: "#636363", marginRight: "10px" }}></i>
<Box style={{ marginLeft: "10px" }}>
<Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
John Doe Admin
</Typography>
<Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
Product Lead
</Typography>
</Box>
</Box>
</div>
</Toolbar>
</AppBar>