Problem with Applied Visual Design: Animate Elements at Variable Rates

Problem with Applied Visual Design: Animate Elements at Variable Rates
0

#1

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?


#2

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.