Problem with Applied Visual Design: Animate Elements at Variable Rates

So, my problem is with this:

https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/animate-elements-at-variable-rates

.star-1 {
margin-top: 15%;
margin-left: 60%;
animation-name: twinkle-1;
animation-duration: 1s;
}
so, my problem is with star-1. if i change the value of ‘margin-top’ from 15% to 5%, both the start moves up. only star 1 supposed to go up isn’t it?
Like I have changed the value for margin-left from 60% to 6% and for this one only star 1’s position changed, which worked fine.

can someone explain me why both stars moved up?

This is because stars are in div sections, which are blocks.
The second star’s margin-top starts from the bottom of the first star’s div.
So when the upper div goes up, the lower div follows.

1 Like