Cannot get a box to fully right align within an AppBar - css

Question

I have this MUI App bar which contains an image, some text, and a box containing an Icon along with some info on the logged in user. I am having difficulty forcing the box with user info to be right aligned. I cannot get it to go to the right edge of the page. I can only get it to stick to the end of the last Box.
<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{" "}
here 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>

Answer 1

(Repost)
No need to use width for your div user-info-box.
You can use justifyContent : "space-between" for your first element and you can remove both justifyContent : "left" and justifyContent : "right" of your children elements.
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<div id="app-bar-box" style={{ width: "100%", display: "flex", justifyContent: "space-between" }}>
<Box id="logo-env-txt-box" 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{" "}
here to go to production.
</Typography>
</Box>
<Box id="user-info-box" style={{ display: "flex", alignItems: "center", height: "auto" }}>
<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>