title: React Material UI Box text goes out of the div
body: <p>I'm trying to build a simple react page, but I got stuck at the very beginning: my text goes out of the box and I don't understand why is it happening.</p>
  
  <p>Could somebody have a look at my styles? <a href="https://i.stack.imgur.com/738o8.jpg" rel="nofollow noreferrer">Picture with the inherited styles</a></p>
  
  <p>If I delete the <code>whiteSpace="nowrap"</code>, the text is going way below.
  My goal is to have the  and the text at the bottom of the picture. 
  Does somebody know where the problem might be? Thanks very much in advance!</p>
  
  <p><strong>HeaderMui.js</strong></p>
  
  <p><pre> const url = process.env.PUBLIC_URL  + "/img/castle.jpg";
  const useStyles = makeStyles((theme => ({</p>
  
  <p>header: {
      height: "57vh",
    background: <code>url(${url})</code>,
    backgroundSize: "cover",
    alignItems: "center",
    justifyContent: "center",
    alignItems: "center",
    backgroundPosition: "center center",
    backgroundAttachment: "fixed",
    flexGrow: 1,
  },</p>
  
  <p>headerText: {
    textAlign: "left",
    fontSize: 20,
    lineHeight: 20,
    boxSizing: "border-box",
    display: 'inline-block',
    alignItems: "center",
    textAlign:"center"
  },
  textWrapper: {</p>
  
  <pre><code>display: "block",
  paddingRight: 15,
  paddingLeft: 15,
  alignItems: "center"
  </code></pre>
  
  <p>},</p>
  
  <p>}</p>
  
  <pre><code>)));
  
  function HeaderMui() {
    const classes = useStyles();
  
    return (
      &lt;Box className={classes.header} flexWrap="nowrap"&gt;
      &lt;Box className={classes.textWrapper} width="100%" flexWrap="nowrap"&gt;
      &lt;h2 &gt;Hogwarts Online&lt;/h2&gt;
        &lt; Box component="span" className={classes.headerText} display="inline-block" flexWrap="wrap" whiteSpace="nowrap"&gt; Hogwarts Online is the first platform out there for the wizards far away from Hogwarts. Experience the power of British magical education while still working muggle job. All you need is a magic wand and to be a proved wizard!&lt;/Box&gt;
        &lt;/Box&gt;
      &lt;/Box&gt;
    );
  }
  export default HeaderMui;
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <code>function App(){
  
  const greaterThanSm = useMediaQuery(theme =&gt; theme.breakpoints.up("sm"));
  const greaterThanMd = useMediaQuery(theme =&gt; theme.breakpoints.up("md"));
      return (
          &lt;&gt;
        &lt;Hidden only="xs"&gt;
          &lt;AppbarMui /&gt;
        &lt;/Hidden&gt;
        &lt;Grid container spacing={3}&gt;
          &lt;Grid
            item
            xs={12}
            md={7}
            lg={12}
          &gt;
          &lt;HeaderMui /&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>