ok! i think the images i included in the first reply broke the post. so i'm going to try to do it again without them. anyways.
not sure if this is an issue you're still struggling with, and i'm not sure if this is what you were going for when you said you wanted it centered, but i fiddled around with this in my editor to see if i could do it! and i thiiiink i may have gotten somewhere?
i haven't tested it on mobile so i'm not sure how responsive it is.
there's a <style> element on line 722 or so, it's for the .online class and looks like this:
<style>
.online {
content: url(https://external-media.spacehey.net/media/sBGxjvVqSVPrOSsUpyb1OgHSuNHNg1uAsaEB6xDyhzZ4=/https://64.media.tumblr.com/d5a60b478de62a97c8d7da969e5cb6a3/11e36ea707fe8726-b3/s100x200/398d378b1c600315c8770bc1b57de0b9b70d660d.gifv);
}
</style>
within that element i added the highlighted lines, directly under the "content" portion after the semicolon:
<style>
.online {
content: url(https://external-media.spacehey.net/media/sBGxjvVqSVPrOSsUpyb1OgHSuNHNg1uAsaEB6xDyhzZ4=/https://64.media.tumblr.com/d5a60b478de62a97c8d7da969e5cb6a3/11e36ea707fe8726-b3/s100x200/398d378b1c600315c8770bc1b57de0b9b70d660d.gifv);
display:inline;
padding-inline: 1em;
}
</style>
on desktop, this seems to center the custom "online" icon with your profile photo on your page. not sure if this was what you were looking for but i figured i'd try!! i'm still a newbie when it comes to coding and web dev; if any more experienced developers see this and have a better way to do this PLEASEEE let me know!!!!