Build a Moon Orbit - Build a Moon Orbit

HTML-CSS
1

Tell us what’s happening:

I got every step correct, but step 19. I was able to get the moon orbit within the space div, but it is still not accepting my input. And I get this alert ’ The top edge of the .moon element should be aligned with the top edge of its containing block.’ Not sure what I am missing.

Your code so far

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

<head>
    <meta charset="utf-8">
    <title>Moon Orbit</title>
    <link rel="stylesheet" href="styles.css">
</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: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.space {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: black;
}

.earth {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
}

.orbit {
  width: 200px;
  height:200px;
  position: absolute;
  transform: translate(-50%, -50%);
  animation: orbit 5s linear infinite;
 
}

.moon {
width: 30px;
height: 30px;
background-color: yellow;
border-radius: 50%;
position: absolute;
transform: translateX(-50%);
top: 100%;
left: 50%;
align-items: center;
}

@keyframes orbit{
 0% {
   transform: rotate(0deg) translate(-50%, -50%);
 }
 100% {transform: rotate(360deg) translate(-50%, -50%);}


}

Your browser information:

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

Challenge Information:

Build a Moon Orbit - Build a Moon Orbit

2

Hi @ghbb3will,

If the earth, orbit, and moon are all positioned relative to space, doesn’t that make space the containing block? And if the top of space is 0, what should the top of the moon be set at?

Happy coding!