Social Links Profile using HTML & CSS

In your media query you set the card container with a width of 325px, which is why it doesn't fit in a 300px screen. You could instead set it to a width of 100%, so that it automatically resizes itself to take up the width of the screen; that way it'll size itself down when the screen gets smaller. And if you add some horizontal padding to the body, it will stop the card from "touching" the sides of the screen, which would look strange for a card with rounded corners.

Another piece of feedback is: you gave separate .social1, .social2 etc classes for each of the social links, and then when styling in CSS had to add all those classes as selectors. Since they all look the same anyway, you could've used just the same .social class for all of them and then styled that one class. If you ever needed to have a way to differentiate and target specific social links from the list, you could use id to tell them apart. While a class is supposed to be applied to multiple elements, id is the one that should apply to just one element in a page, in order to specifically identify it.