Social Links Profile

Hey, I've noticed you use margins to get your objects in the right position. This can get very tiring and messy, especially when working on bigger projects and projects that might change their requirements later.

For example instead of using

.photo img {
    //...
    margin-left: 100px;
    margin-top: 25px;
}

you could use

.photo {
    //...
    display: flex;
    justify-content: center;
}

This will horizontally center your image (and all other content) inside of the div.

Alternatively there is also a way to center objects by assigning automatical margins like:

.photo img {
    //...
    margin-inline: auto;
}

This will horizontally center your image by creating margins that fill out the space to the left and the right of it.

PS: I noticed you tried to use align-items: center; on your .photo class. This property doesn't work, because your div is displayed as a block display: block;. You can enable it by making your div either a flexbox display: flex; or a grid display: grid;

Happy coding!