Why is my main content so far away from the left?

Question

to start off I will say that I'm completely new to React and front-end development in general. I'm trying to put together a simple web UI using React and trying to figure things out as I go. I have an issue where my content (in screenshot displayed as 'Lorem') is too far away from the Drawer on the left. When inspecting through Dev Tools it displays that there is some sort of "invisible" block. My guess is I'm doing something wrong with how I use flexbox layout grid. I'd appreciate the help to understand where I'm going wrong and how I've misused flexbox.

UI issue preview http://prntscr.com/nb74pc

I've tried to play around with flexbox grid by changing flexGrow, flexShrink parameters, however no luck.

My code is as follows

const styles = theme => ({
  root: {
    display: 'flex',
  },
  grow: {
    flexGrow: 1,
  },
  appBar: {
    width: `calc(100% - ${drawerWidth}px)`,
    zIndex: theme.zIndex.drawer + 1,
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
  toolbar: theme.mixins.toolbar,
  drawerInfo: {
    width: drawerWidth,
    flexDirection: 'column',
    align: 'left',
  },
  main: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.default,
    padding: theme.spacing.unit * 3,
  },
});

class Main extends React.Component {
  render() {
    const { classes } = this.props
    return (
      <div className={classes.root}>
        <CssBaseline />
        // Application bar component
        <AppBar
          className={classes.appBar}
          position="fixed">
          <Toolbar>
            <Typography
              className={classes.grow}
              variant="h6"
              color="inherit"
              noWrap
            >
              {pageName}
            </Typography>
            <LoginDialog />
          </Toolbar>
        </AppBar>

        // Application side menu
        <Drawer
          className={classes.drawer}
          variant="permanent"
          anchor="left"
          classes={{
            paper: classes.drawerPaper,
          }}>
          <Toolbar>
            <div className={classes.drawerInfo}>
              <Typography
                variant="button"
                component="h3">
                Grade Calculator
              </Typography>
              <Typography
                variant="caption"
                component="p">
                Version: 1.0.0
              </Typography>
            </div>
          </Toolbar>
          <Divider />
          <MenuItem>
            <Typography
              variant="body2">
              {pageName}
            </Typography>
          </MenuItem>
        </Drawer>
        <main className={classes.main}>
          <div className={classes.toolbar} />
          <Typography
            variant="title">
            Lorem
          </Typography>
        </main>
      </div>
    );
  }
}

Answer 1

Very stupid mistake - I used "// comment" twice and that was creating these "invisible blocks". It is now all fine after deleting those!