title: how can the menu bar closer to the side
body: <p>I am trying to do an AppBar following the Material UI document, but I don't know why it can't closer to the side.</p>
  <p>I want the logo and the button can closer to the side(See the picture).</p>
  <p>I tried different methods, but it still does not work. Following in my code, do you know what's the problem with my code?</p>
  <p><a href="https://i.stack.imgur.com/HUPpz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HUPpz.png" alt="enter image description here" /></a></p>
  <p>It is the code of the AppBar. Thank you so much for your help!</p>
  <pre><code>&lt;AppBar position=&quot;fixed&quot; color=&quot;inherit&quot;&gt;
                  &lt;Container maxWidth=&quot;xl&quot;&gt;
                      &lt;Toolbar &gt;
                          &lt;Box sx={{ display: { xs: 'none', md: 'flex' } }} &gt;
                              &lt;AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} /&gt;
                              &lt;Typography
                                  variant=&quot;h6&quot;
                                  noWrap
                                  component=&quot;a&quot;
                                  href=&quot;/&quot;
                                  sx={{
                                      mr: 2,
                                      display: { xs: 'none', md: 'flex' },
                                      fontFamily: 'monospace',
                                      fontWeight: 700,
                                      letterSpacing: '.3rem',
                                      color: 'inherit',
                                      textDecoration: 'none',
                                  }}
                              &gt;
                                  LOGO
                              &lt;/Typography&gt;
                          &lt;/Box&gt;
                          &lt;Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' }, }}&gt;
                              &lt;IconButton
                                  size=&quot;large&quot;
                                  aria-label=&quot;account of current user&quot;
                                  aria-controls=&quot;menu-appbar&quot;
                                  aria-haspopup=&quot;true&quot;
                                  onClick={handleOpenNavMenu}
                                  color=&quot;inherit&quot;
                              &gt;
                                  &lt;MenuIcon /&gt;
                              &lt;/IconButton&gt;
                              &lt;Menu
                                  id=&quot;menu-appbar&quot;
                                  anchorEl={anchorElNav}
                                  anchorOrigin={{
                                      vertical: 'bottom',
                                      horizontal: 'left',
                                  }}
                                  keepMounted
                                  transformOrigin={{
                                      vertical: 'top',
                                      horizontal: 'left',
                                  }}
                                  open={Boolean(anchorElNav)}
                                  onClose={handleCloseNavMenu}
                                  sx={{
                                      display: { xs: 'block', md: 'none' }
                                  }}
                              &gt;
                                  {pages.map((page) =&gt; (
                                      &lt;MenuItem key={page} onClick={handleCloseNavMenu}&gt;
                                          &lt;Typography textAlign=&quot;center&quot;&gt;{page}&lt;/Typography&gt;
                                      &lt;/MenuItem&gt;
                                  ))}
                              &lt;/Menu&gt;
                          &lt;/Box&gt;
                          &lt;AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} /&gt;
                          &lt;Typography
                              variant=&quot;h5&quot;
                              noWrap
                              component=&quot;a&quot;
                              href=&quot;/&quot;
                              sx={{
                                  mr: 2,
                                  display: { xs: 'flex', md: 'none' },
                                  flexGrow: 1,
                                  fontFamily: 'monospace',
                                  fontWeight: 700,
                                  letterSpacing: '.3rem',
                                  color: 'inherit',
                                  textDecoration: 'none',
                              }}
                          &gt;
                              LOGO
                          &lt;/Typography&gt;
                          &lt;Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}
                              justifyContent=&quot;center&quot;
                              alignItems=&quot;center&quot;&gt;
                              {pages.map((page) =&gt; (
                                  &lt;Button
                                      key={page}
                                      onClick={handleCloseNavMenu}
                                      sx={{ my: 2, color: 'inherit', display: 'block' }}
                                  &gt;
                                      {page}
                                  &lt;/Button&gt;
                              ))}
                          &lt;/Box&gt;
  
                          &lt;Box sx={{ flexGrow: 0 }}&gt;
                              &lt;Button type=&quot;submit&quot; variant=&quot;contained&quot;&gt;
                                  free to try
                              &lt;/Button&gt;
                          &lt;/Box&gt;
                      &lt;/Toolbar&gt;
                  &lt;/Container&gt;
              &lt;/AppBar&gt;
  </code></pre>