I hear you. I am a successful backend engineer, but boy I have been struggling with CSS too for many years. It helped that this year I took up a full time role which needs me to do CSS and I have a mentor guiding me. You should also find a mentor for it.
What we really need is some kind of "logger" for how the browser interpreted CSS and made its decisions.
For example, if two boxes are overlapping even if you said margin is 10px, the browser should say something like "calculated box a to 500px wide. Box b is set to width of fixed width of 300px and is aligned to right. Hence its placement will be 0px from the right. Ignoring margin 30p,' Then you can reason that since screen is only 700px wide, there will be overlap. (I am making this is open obviously).
My point is, the browser almost never gives any feedback like a compiler would. It makes us think/guess based on "inspector".
What we really need is some kind of "logger" for how the browser interpreted CSS and made its decisions.
For example, if two boxes are overlapping even if you said margin is 10px, the browser should say something like "calculated box a to 500px wide. Box b is set to width of fixed width of 300px and is aligned to right. Hence its placement will be 0px from the right. Ignoring margin 30p,' Then you can reason that since screen is only 700px wide, there will be overlap. (I am making this is open obviously).
My point is, the browser almost never gives any feedback like a compiler would. It makes us think/guess based on "inspector".