div对齐不适用于带有菜单的标题

我尝试正确调整菜单，但无法正常工作。这样做的方式是，当您到达我的网站但未登录时，将显示以下标题：

用户登录后，login/register将由向下滚动菜单代替，该菜单由单击头像触发。向下滚动正常，但菜单的渲染未对齐，如下所示：

首先，我无法使头像和菜单正确对齐。

下面是代码：

const fakeName = "First Last";
const isGuest = false;

const StyledProfileMenu = withStyles({
    paper: {
      border: '1px none',
      borderRadius: "21px",
      boxShadow: "0px 8px 18px 0 rgba(0,0,0,0.14)",
    },
  })((props) => (
    <Menu
      elevation={0}
      getContentAnchorEl={null}
      anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'left',
      }}
      transformOrigin={{
        vertical: 'top',
        horizontal: 'center',
      }}
      {...props}
    />
  ));

  const StyledProfileMenuItem = withStyles((theme) => ({
    root: {
        margin: "2px 30px 1px 10px",
        fontFamily: "Source Sans Pro",
        fontSize: "",
        '&:hover': {
            backgroundColor: "#ffffff",
            color: '#ff7255'},

        '&:focus': {
            backgroundColor: "#ffffff",
            color: '#ff7255'},
    },
  }))(MenuItem);


const useStyles = makeStyles(theme => ({
    root: {
      boxShadow: "none",
      backgroundColor:  "#ffffff",
      marginTop: theme.spacing(3)
    },
    logo: {
        width:"214px",
        height:"28px",
        marginLeft: theme.spacing(20),
        marginRight: theme.spacing(3)

    },
    search: {
        position: 'relative',
        borderRadius: "21px",
        backgroundColor: "#f4f7f8",
        marginRight: theme.spacing(2),
        marginLeft: theme.spacing(3),
        width: "467px",
        height: "40px",
       // [theme.breakpoints.up('sm')]: {
       //   marginLeft: theme.spacing(3),
      //    width: 'auto',
       // },
      },
      searchIcon: {
        padding: theme.spacing(1, 2),
        height: '18px',
        width: '18px',
        position: 'absolute',
        pointerEvents: 'none',
        alignItems: 'center',
        justifyContent: 'center',
        color: "#cecece"
      },
      inputRoot: {
        color: "#cecece",
        fontFamily: "Source Sans Pro",
        fontSize: "18px"
      },
      inputInput: {
        paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
        width: "467px",
      //  [theme.breakpoints.up('md')]: {
      //    width: '20ch',
      //  },
      },
      menu: {
        display: "flex",
        marginLeft: theme.spacing(2),
        margin: "auto",
      },
      menuItem: {
        color: "#cecece",
        fontSize: "20px",
        fontFamily: "Fredoka One",
        fontWeight: "bold",
        '&:hover': {
            backgroundColor: "#ffffff",
            color: '#ff7255'},
        '&:focus': {
            backgroundColor: "#ffffff",
            color: '#ff7255'},
        marginRight: theme.spacing(3),
        marginLeft: theme.spacing(3),
      },
      userName: {
          fontFamily: "Source Sans Pro",
          fontWeight: "Bold",
          borderBottom: '3px solid #ff7255',
          textAlign: "center",
          margin: "2px 10px 2px 10px",
          paddingBottom: "2px"
      }
  }));




function Header(){

    let loginOrProfile;

    const styles = useStyles();

    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };

    const profileMenu = 
        <div>
        <IconButton
            aria-controls="customized-menu"
            aria-haspopup="true"
            variant="contained"
            color="primary"
            onClick={handleClick}>
            <Avatar alt="Avatar" src={DefaultAvatar} /> 
            <ArrowDropDownIcon style={{ color: "#ff7255" }}/>       
        </IconButton>
        <StyledProfileMenu
            id="customized-menu"
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={handleClose}>
            <p className={styles.userName}> {fakeName} </p>
            <StyledProfileMenuItem>
            <ListItemText primary={TextContents.MenuProfile} />
            </StyledProfileMenuItem>
            <StyledProfileMenuItem>
            <ListItemText primary={TextContents.MenuMessages} />
            </StyledProfileMenuItem>
            <StyledProfileMenuItem>
            <ListItemText primary={TextContents.MenuSettings} />
            </StyledProfileMenuItem>
            <StyledProfileMenuItem>
            <ListItemText primary={TextContents.MenuLogout} />
            </StyledProfileMenuItem>
        </StyledProfileMenu>
        </div>;

    const loginMenu = 
        <Typography className={styles.menuItem}> {TextContents.MenuLoginRegister} </Typography>;


    if(isGuest){
        loginOrProfile = loginMenu;
    } else {
        loginOrProfile = profileMenu;
    }

    return (
        <div className={styles.root}>
            <AppBar position="static" className={styles.root}>
                <Toolbar>
                    <img src={VillageLogo} alt="logo" className={styles.logo}/>
                    <div className={styles.search}>
                        <div className={styles.searchIcon}>
                            <SearchIcon />
                        </div>
                        <InputBase
                            placeholder={TextContents.SearchPlaceHolder}
                            classes={{
                                root: styles.inputRoot,
                                input: styles.inputInput,
                            }}
                            inputProps={{ 'aria-label': 'search' }}
                        />
                    </div>
                    <div className={styles.menu}>
                        <Typography className={styles.menuItem}> {TextContents.MenuDiscover} </Typography>
                        <Typography className={styles.menuItem}> {TextContents.MenuCreate} </Typography>
                        <Typography className={styles.menuItem}> {TextContents.MenuHiW} </Typography>
                        {isGuest && loginMenu}
                        {!isGuest && profileMenu}
                    </div>
                </Toolbar>

            </AppBar>
        </div>
    );
}



export default Header

如果有人对如何正确调整对齐有任何想法，我将非常高兴