I would like to center my Appbar content, so it doesn't spread to sides of the screen when on larger displays. There are

CodePudding user response：

The width of your Appbar is set to 100% — meaning that it would occupy all the space of its flexed parent element Box, you need to give it a fixed width or set a maximum limit how much it can stretch.

Here are some suggestions that could fix your problem:

• Giving your Appbar a fixed width for each Media query, so that it doesn't extend depending on your screen size.

• Giving your Appbar a dynamic width combined with an offset such as width=calc(75vw 2rem), note that the 75vw can be substituted for 75% since the parent component takes up 100% of the width view.

• Using justifyContent : "space-around" on your Box parent component, to achieve the desired result.

Edit: NearHuscarl's solution seems better.