how can I make align-items work in reactJS? - css

Question

I have 4 boxes which I'm using them as component , when I'm applying justify-content:center it is centering my items in terms of with , but when I'm trying to use align-items:center , it's not working , and the more confusing thing that I made body color teal 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 ?
import React from 'react';
import "./App.css"
function Myfunc(props){
return(
<div className="holder">
<h1>{props.text}</h1>
</div>
);
}
export default Myfunc;
import React from "react";
import Myfunc from "./CSSexample";
function App(){
return(
<div className="container">
<Myfunc text=""/>
<Myfunc text=""/>
<Myfunc text= ""/>
<Myfunc text=""/>
</div>
);
}
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;
}

Answer 1

Try setting the width/height of container
.container {
display: flex;
justify-content: center;
align-items: center;
color: white;
height: 100vh;
width: 100vw
}