Looks great! I really like that you used an external stylesheet—it's a good practice for keeping things organized (separation of concerns). I also like how you used the <main> tag to highlight the primary content of the page. Although there are more than one way of coding, the way to centered the profile card is what I would have done as well.
For responsiveness, I'd recommend looking into media queries. They allow you to apply different styles based on the screen size, making your design more responsive across devices.
About a rulebook on centering, unfortunately there isn't any :/, although there are several best practices and methods. Short answer: flexbox for 1D and grid for 2D. Flexbox layout is quick with a few lines of code, and is more single axis layout such as navigation bar, row of cards. Grid gives you more control over columns and rows, but requires more lines of code. Might be more useful for complex dashboard layouts. Some prefer flexbox and some grid.
One suggestion: although the links for this challenge are dead links, have you considered using <a> tags instead of <span> elements for the links? When linking to external sites or other pages, the <a> tag is semantically more appropriate and will improve accessibility.
