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: https://preview.webflow.com/preview/pureritam-7afdd11f58e3c4c664c9708793341?utm_medium=preview_link&utm_source=designer&utm_content=pureritam-7afdd11f58e3c4c664c9708793341&preview=2996f93b0d7277d74e219eb063f58077&pageId=5ef42c976796d69abe19a3e2&mode=preview

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).

https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

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

Thank you! I will try this