Making a weird layout responsive

I’m creating my design portfolio, and I am having troubles with one of my sections.

Below is my intended design, essentially as you hover over each shape and you get some pop-up text.

Ignoring mobile for now, I can’t seem to make it successfully responsive on any varying computer screen widths. They never seem to sit in the horizontal center of the section, and also I can’t get the shapes to be nicely arranged round the text.

Currently I have a container with two div boxes (one for text, one for shapes), both set to absolute then manually adjusted to make the shapes sit higher than the text. I feel like this is the wrong way to go about this… anybody able to give any tips?

Here is my site Read-Only: My Project