This forum is now read-only. Please use our new forums at

Sun, Earth, and Code Forum

View Course

59 points
Submitted by
almost 3 years ago

5/7 Did you add 'position: absolute;' to your #earth-orbit style? i did

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%;

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

border-color: orange;
border-width: 8px;
border-style: solid;
border-radius: 50%;
box-shadow: 0 0 128px red;


#earth {
/* Style your earth */
position: absolute;
top: 0;
left: 50%;

width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -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%;

1 vote


I'm having the same problem. Mine looks exactly like yours. I even tried copying and pasting it directly from the Instructions. It must be a glitch, so I'm just going to move on. It will annoy me that it won't be 100% finished, so I hope there's a workaround eventually. I'm on Firefox, it might just be the brower ? idk

389 points
Submitted by
almost 3 years ago