Basic Flexbox excercise from total beginner

Hi Guys,

I have finished another project, I know the design and coding might seem really bootleg and noob but I am 100% self-taught, hence also open to any constructive criticism. My main questions which I could not figure out on my own and woul be very grateful if you could answer any of them are:

1.) There is a white border around the guy's profile pic which I could not recreate, any suggestions? 2.) I made the background in a -lets say- acceptable degree (compared to my skills) but is there any more "orthodox" way to create this kind of bakground? -meaning the image is turned by XY degrees and then the container is above them. 3.) Several elements use position:absolute with top/bottom/left/right XY% to put elements in the middle , I tried position:absolute and add 50% but for some reason then the picture totally was not positioned to the center, like .img_profile has top:25% and left:40% to put the guy's profile picture in the middle, this works. Any suggestions as to why 50% doesnt work as I would predict in this case?

Again, any constructive semantic/practice/method suggestion & criticism is very much appreciated in advance, so far I only have positive experiences with the community here in this regard. :)

Thanks in advance!