Why my Flex is not working here?

Why my CSS flex not working ? When I am trying to align at center it’s just disappeared, what to do is thier any other CSS Properties for align div element horizontally?

Here’s my code:

  1. HTML
<section class="clock">
  <div class="hand hour-hand"></div>
  <div class="hand min-hand"></div>
  <div class="hand sec-hand"></div>
</section>
  1. CSS

.clock{
display:flex;
justify-content:center;
}
.hand{
max-width:30%;
height:30rem;
background-color:#fcd;
margin-top:1px;
display:flex;
justify-content:center;
}

and the project link https://codepen.io/MadanSinha/pen/gOLrjyO

type something inside divs or give them height of 10rem

give them width of 30vw it will work