Twitch Facecam Overlay

I am a Math/CS student from UIUC and I’ve primarily coded in java python and C++. I have little to no HTML or CSS experience but from what I have seen it isn’t that difficult to learn. I am trying to make a “facecam overlay” as I like to call it, for my buddies twitch stream. All I am hoping to accomplish is a nice box around his facecam with his stream name and a few other words. I might make "Wins: " and "Donations: " buttons as well (he streams fortnite).

I have gotten some boxes and cool designs floating around the screen but I cannot for the life of me figure out how to center the graphics on the left hand side of the screen. I believe it is the body{} element that alters the color of the box in which my graphics appear.

I am looking for some advice/ tips on how to get this going and formatted properly. If anyone can lend a hand or point me in the right direction that would be great!

Do you mean an OBS/XSplit browser source or an Extension

Either way a body set to 1080px x 1024px and then the element you are creating set to position absolute and top and left’ed as required.