Certification grid and Background grid misalign

[sinecurelife]

This chart uses two grids to draw the objects, one for the background (domain borders, title, and sub-domain shading) and one for the foreground (certification blocks).

The current code makes the chart align decently well at 1080p but uses vmax to resize to smaller or larger viewports. When resizing away from 1080p, the foreground objects sometimes overlap or underlap the background objects.

When adding new objects to the foreground, the foreground objects sometimes lose their alignment with the background and need to be tuned every update.

[sinecurelife]

I added the same "left" attribute to the certbg and certcontainer which solved a part of the alignment issue. Scaling on 1080p and 1440p monitors continue to be different the further from the left edge I view though.

[sinecurelife]

I don't know why, but things are lining up better in my most recent version. I'm going to close this because this is not a problem if the chart is just less cluttered, therefore giving each element more space to breath.

The only changes I made were:

• Tried to add a "Security Certification Roadmap" title to the top. When it didn't look good on mobile, I reversed the change. Perhaps changing the vmax for the certcontainer css object made a difference.
• Adjusted the wordpress template to go full width in the mobile view so it can be readable. This may have affected the tablet and desktop view somehow.
• Removed the static image setting for viewports smaller than an iPhone since the mobile version works relatively properly now. The code in that section may have affected the alignment of other elements.
• Removed some commented certifications which appears to be retired.

One or all of those changes could have helped for some reason.