Interactive social link profile using CSS flexbox

Remove flex from you main and put it to the body with changes:

body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about min-height. You can use grid instead of flex too(with some changes).

Hope you found this comment helpful :)

I recommend you follow the flex column approach to centering along with min-height: 100svh on the body (the body is only as tall as it's content by default).

More important than that though, is getting the HTML right on this! This should be a list of links (not buttons - because these would navigate somewhere) and these need to be within an unordered list of list items.

This is a really important skill to master — translating a design into the most appropriate meaningful html elements for the content. Don't skip learning and putting that into practice. It's the biggest single thing you can do to build accessible solutions.

I encourage you to use this technique to make the card responsive with ease:

.card {
width: 90%;
max-width: 600px;
}

On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 600px it will lock with this size.

Also to put the card in the center I advise you to use this code snippet:

.container {
display: grid;
place-items: center;
}

Hope you found this comment helpful 💗💗💗

Good job and keep going 😁😊😉

I think you should center the main part, nice project.