Inline elements not aligning

This is actually a copy of the homepage because I can’t get Sections to be responsive or to go underneath one another anymore. On the homepage, it works fine. literally dragging and dropping section under one another but then when I got to other pages it but something is wrong and I don’t know why. I can’t set up my product page or anything. And now I’m just trying to create a Second page but I can’t figure out if it’s a glitch or not.
I tried making just the hero image fixed and then I tried making it absolute and then adding other sections underneath it and that didn’t work. Then I tried adding blocks underneath and that didn’t work

Then I try to add these inline elements in section 2 but then I literally tried to copy the styles over and when I was adding content it suddenly just went wonky?

Also, I tried to add a nav interaction where the nav to change his color after a certain point also doesn’t know how to do that?

Here is my site Read-Only:

Use flexbox grid -or- CSS grid (Inline-block is not the way to create grid of cards).

When you use inline-block the default value is baseline (No way to change this by webflow designer).

By custom CSS vertical-align: top; you could solve this (By why? use flexbox or grid - or webflow columns widget).

Google: “webflow flexbox grid” -or- “webflow CSS grid” for better approach.

Thank you! I will try this