Social Links (HTML/CSS)

Try using padding on the .card element instead of margin. But, i think if you add even 1px of padding you should start seeing the margins - this is because of margin collapse / stacking margins.

if im right, check this article for more on stacking margins: FreeCodeCamp

Hope that helps, but good work! Clean code and I like the comments in the css!

👋 Hello @kiaraaa123!

👏 Congrats on investing your time and taking your frontend skills to the next level with the Social links profile challenge.

I have a few suggestions that could help you improve your solution to this challenge.

On line 34 to 38 of your index.html file: A p element does not have to be directly a child of a in this case, instead you could:

• Add a title for your unordered list (the title should be visually hidden, as per the design, it should only be available to screen reader users)
• Create an unordered list with a ul
• Put each a inside an li (and each li inside the ul created)

Note: It is recommended to do this, because in this case you have a group of links of the same kind, "your social networks".

Useful resources:

• The anatomy of visually-hidden
• <ul>: The Unordered List element

Good practices for your styles.css file:

Avoid using the unit px in your properties. Instead, use the rem unit. This will make the layout scale correctly for people who have a different text size setting. To demonstrate go into your browser settings and change the text size to a larger value like 32px — currently your solution would still be really narrow for those people. But if you use rem it would adjust.

Note: The px unit is generally recommended more in the border and box-shadow properties, because these properties do not change in relation to the text size.

Useful resources:

• PX or REM in CSS? Just Use REM

Keep learning, coding and sharing! 🌟

Happy coding! 🚀