Social Links Challenge

Fala @marlonszm!

Seu projeto ficou ótimo!

Notei que você utilizou margin pra centralizar o card. Usar margens não é a melhor opção pra centralizar elementos.

📌 Existe uma forma melhor e mais eficiente de posicionar elementos no meio da página (tanto na horizontal quanto na vertical):

• Aplique isso ao body (Pra funcionar corretamente, não use position ou margins):

body {
    min-height: 100vh;
    display: flex; /*  também funciona com grid  */
    justify-content: center;
    align-items: center;
}

Espero que ajude!

Fora isso, você fez um excelente trabalho!

First of all, I would like to congratulate you on completing the challenge; your solution looks neat and clean. However, there is still some improvement.

First, about your question ( Why you cannot add the black color on hover )

This is how your html is structured

<div class="links>
   <a href="#">Github</a>
<div>

And this is how you styled your css

.links:hover{
color: black;
}

Reason it does not work. Your .links selector is a container for your a tag so the color black isn't applying on the a tag but rather on the .links which is the div.

How to make it work. So there are probably many ways of solving this, but one solution is to add an hover pseudo-class to your .links with a child selector as the a tag and add the color:black declaration. So what this means is look at any a tag inside the parent of the .links selector and when the .links is on hover, apply the styles. Like what I have done below:

.links:hover > a {
color: black;
}

Other improvements

I noticed your favicon did not show, and I think it has to do with the path.

Change your favicon path from 
Before
/images/favicon-32x32.png
After
./images/favicon-32x32.png