Site issues between Chrome, Safari, etc... Could use some wisdom

I posted a related issue yesterday about mobile issues, and I think I’ve figured it out that it’s actually a browser issue. My site doesn’t translate correctly to Safari from Chrome, and I tried fixing the issues in Safari, but it just messed up Chrome. Could someone take a quick look and perhaps impart some wisdom about why this is happening, so I can fix it across the site. I’m afraid of playing wack-a-mole forever on this…

Right now the landing page looks correct in Safari, bad in Chrome. The rest of the site is the reverse:

read only: https://jeffreys-blank-site-1632d9.webflow.io/

actual site: jeffreymccord.com


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi, Jeffrey!

Just to make sure I understand correctly the issue, are you having trouble with spacing your link-blocks correctly?

Thanks for responding! Just general placement of everything. How can I build it in such a way to translate across browsers in the same way visually, and reliably?

It looks like you are relying a lot on the absolute positioning in your project, with setting distances in viewport width and viewport height units. It might give different results depends on the end user browser preferences.

Have you tried or considered using CSS Grid?
If you are not very familiar with Grid functionality, our Webflow University has great course about it

Could you describe the structural hierarchy on that landing page as you would recommend building it this way? It would be really helpful to have an example or two of how a specific problem area should be built, so I could replicate it.