Build a Moon Orbit - Build a Moon Orbit

HTML-CSS
1

Tell us what’s happening:

I don’t understand why my code doesn’t work . The contents of the body element should be centered on the page by setting the height to 100% of the viewport height, display to flex, justify-content, and align-items to center.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8">
    <title>Moon Orbit</title>
</head>

<body>
    <div class="space">
        <div class="earth"></div>
        <div class="orbit">
            <div class="moon"></div>
            </div>
        </div>

</body>

</html>

/* file: styles.css */
body {
height:100%vh;
display:flex;justify-content:center;align-items:center;
}

.space {
  position: relative;
  width:200px;
  height:200px;
  } 
  .earth {
    transform:translate(-50%, -50%);
    top:50%; 
    left:50%;
    position:absolute;
    width:100px;
    height:100px;
    } 
    .orbit {
      transform:translate(-50%, -50%); 
      position:absolute ;
      width:200px;
      height:200px;
      }  
      .moon {
        width:30px;
        height:30px;
        position:absolute;
        }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 Edg/142.0.0.0

Challenge Information:

Build a Moon Orbit - Build a Moon Orbit

2

this si not a valid value for height, as %vh is not a valid unit