Why are my CSS media queries not working properly on mobile devices?

hey everyone, really new to all this web dev stuff and just launched my first super simple landing page. it looks decent on my laptop, but when i check it on my phone or tablet, everything just kinda breaks. i'm really struggling with responsive design.

• The Main Issue: my css media queries don't seem to be applying correctly or at all on smaller screens. elements are overlapping, text sizes are off, and images are overflowing their containers. it's a mess, to be honest.
• What I've Done So Far:
  • i made sure i have <meta name="viewport" content="width=device-width, initial-scale=1.0"> in my html head.
  • i've used browser dev tools to simulate different mobile sizes, and the styles i expect from my media queries just aren't showing up.
  • i've checked my css syntax multiple times for typo's, especially the @media screen and (max-width: 768px) parts. i'm careful with my breakpoints.
  • tried moving some css definitions around, thinking maybe order matters?
  • even tried adding !important to a few styles just to see if they'd take effect (i know, probably bad practice).
• Specific Problems: for example, on screens smaller than 768px, i want my two-column layout to stack vertically, but they stay side-by-side and get squished. also, my main header font size isn't reducing.
• My Question: am i missing something fundamental here? are there common beginner mistakes with media queries or responsive design that i should be aware of? any debugging tips for a complete noob would be amazing.
• Looking for help: really hoping someone can point me in the right direction. thanks in advance for any advice! waiting for an expert reply.