Hi,
I am working on Responsive Web Design - Intermediate CSS by Building a Picasso Painting challenge. It’s easy to progress through steps as most of them are just coping the code. But I struggle with understanding why are the elements in the place they are?
Here is an example:
.black-dot {
width: 10px;
height: 10px;
background-color: rgb(45, 31, 19);
border-radius: 50%;
display: block;
margin: auto;
margin-top: 65%;
Why are the black dots in the place they are? I tried changing margin-top to 50% and other values but I still don’t understand it. This is just a simple example.
Where and how can I learn more about positioning? Does anyone have any good interactive resources ( I can’t find any)? I feel I don’t get enough practice on FCC and the challenges are too prescriptive. Just reading about these topics on sites such as Mozilla Developer is just that - reading. I still don’t understand a thing.
Or is it magic 
?
Silvia