title: how can I make align-items work in reactJS?
body: <p>I have 4 boxes which I'm using them as component , when I'm applying <code>justify-content:center</code> it is centering my items in terms of with , but when I'm trying to use <code>align-items:center</code> , it's not working , and the more confusing thing that I made body color <code>teal</code> and the whole page turned teal but in developer tools it shows that I only have small amount of height, so why the whole page turned to teal ?</p>
  <pre><code>import React from 'react';
  import &quot;./App.css&quot;
  function Myfunc(props){
      return(
          &lt;div className=&quot;holder&quot;&gt;
              &lt;h1&gt;{props.text}&lt;/h1&gt;
          &lt;/div&gt;
       );
  }
  export default Myfunc;
  
  import React from &quot;react&quot;;
  import Myfunc from &quot;./CSSexample&quot;;
  function App(){
      return(
         &lt;div className=&quot;container&quot;&gt;
           &lt;Myfunc text=&quot;&quot;/&gt;
           &lt;Myfunc text=&quot;&quot;/&gt;
           &lt;Myfunc text= &quot;&quot;/&gt;
           &lt;Myfunc text=&quot;&quot;/&gt;
         &lt;/div&gt;
      );
  }
  export default App;
  
  *,
  *::before,
  *::after{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  .holder{
      background-color: crimson;
      width: 10rem;
      height: 10rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid white;
  }
  body{
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: teal;
  }
  .container{
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
  }
  </code></pre>