Saturn Rotation


#1

Saturn for some reason is not orbiting, it is just spinning. Does anyone have a clue on what to do?
Thanks.

Code:

style.css

html, body {
/* The universe takes up all available space */
width: 100%;
height: 100%;

/* The universe is black */
background-color: black;

}

sun {

position: absolute;
/* Positions the top-left corner of the image to be *
/* in the middle of the box */
top: 50%;
left: 50%;

border-color: orange;
border-width: 2px;
border-style: solid;
border-radius: 50%;

box-shadow: 0 0 64px yellow;

/* Play with these numbers to see what it does */
height: 200px;
width: 200px;
margin-top: -100px; 
margin-left: -100px;

}

earth {

/* Style your earth */
position: absolute;
top: 25%;
left: 25%;

position: absolute;
top: 0;
left: 50%;

height: 50px;
width: 50px;
margin-left: -25px;
margin-top: -25px;

}

earth-orbit {

/* For Section #2 */
 position: absolute;
top: 50%;
left: 50%;

width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;

border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;  

 -webkit-animation: spin-right 10s linear infinite;
 -moz-animation: spin-right 10s linear infinite;
  -ms-animation: spin-right 10s linear infinite;
   -o-animation: spin-right 10s linear infinite;
      animation: spin-right 10s linear infinite;

}
This change applies your custom animation to your earth's orbit. It will rotate your orbit 360 degrees continuously.

Q&A ForumGlossary
}

saturn {

position: absolute;
top: 25%;
left: 25%;

position: absolute;
top: 0;
left: 50%;

height: 50px;
width: 50px;
margin-left: -25px;
margin-top: -25px;

}

saturn-orbit {

position: absolute;
top: 50%;
left: 50%;

width: 150px;
height: 150px;
margin-top: -250px;
margin-left: -250px;

border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%; 

 -webkit-animation: spin-right 5s linear infinite;
 -moz-animation: spin-right 5s linear infinite;
  -ms-animation: spin-right 5s linear infinite;
   -o-animation: spin-right 5s linear infinite;
      animation: spin-right 5s linear infinite;

}

@-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}


#2

I have the exact same problem!!
Why??
And thanks for the earth orbit, it helped alot!!


#3

(UPDATED)

I don't know if mine can be of some help buuuut...

https://www.dropbox.com/s/45uqk2xc3va1gbf/Codecademy.rar?dl=0