Responsive CSS Layout Bug Fix

I’ve put a quick patch in place for my site—setting every element to border-box, hiding horizontal overflow, and forcing columns to stack under 768 px—but a few stubborn layout issues remain. Some components still break their boxes, the page can occasionally scroll sideways on mobile, and the float overrides don’t feel future-proof.

I’d like you to audit the stylesheet, identify what is really causing the overflow and sizing glitches, and deliver a clean, well-commented CSS (or SCSS) update that:
• keeps a consistent border-box model everywhere,
• eliminates any unexpected horizontal scroll on all viewports, and
• lets column-based sections collapse gracefully on small screens without relying on important-heavy quick fixes.

Please test in the latest Chrome, Safari, Firefox, and a mobile emulator, then hand back the updated CSS along with a brief summary of what you changed and why.