ボタンの回り込みがうまくいかない

Question

前提・実現したいこと

Reactで簡単なアプリを作っています。
そこでボタンを作ったのですが、三つ目のボタンがうまく回り込んでくれません。
どのようにすればいいでしょうか。

発生している問題・エラーメッセージ

該当のソースコード

<AppBar>
          <Toolbar>
            <Typography type="title" color="inherit" style={{ marginRight: 15 }}>
              サンプルアプリ
            </Typography>
            <div style={{ float: 'right', display: 'inline-block', width: 1000 }}>
              <Button
                aria-controls="customized-menu"
                aria-haspopup="true"
                variant="contained"
                color="primary"
                style={{ marginRight: 15 }}
              >
                シフト
              </Button>
              <Button
                aria-controls="customized-menu"
                aria-haspopup="true"
                variant="contained"
                color="primary"
                style={{ marginRight: 15 }}
              >
                シフト提出
              </Button>
              <CustomizedMenus style={{ marginRight: 15 }} />
            </div>
          </Toolbar>
        </AppBar>

試したこと

ボタン全体のdivをinline-blockにして幅を持たせて、floatにしてみましたが、変わりませんでした。

Answer 1

フレックスボックスでラップしてください。
https://material-ui.com/system/flexbox/