Are there any other good references that give a good underlying understanding of HTML/CSS without just giving examples of the various elements?
Yeah. The W3C spec.
A few years ago (before css flexbox and grid were really a thing), I was in your shoes. Anytime I needed to do something non trivial, I'd have to find some snippet from some tutorial site that would kind of fit with what I was looking for. At some point I got tired of that and just read the W3C specification. That's when I finally got the CSS layout manager. The specification was very accessible and explained exactly the layout rules. For example, here's the spec on the CSS box model: https://www.w3.org/TR/css-box-3/
Now that flexbox and grid are universally supported in modern browsers, css is actually quite easy.
The things that still trip me up with CSS after a few years of full time frontend work are the following:
1. Dynamic 2D stuff
CSS kinda sucks for most 2D dynamic layouts. Especially when you have heights that are dependent on widths or the other way around. With CSS grid and the upcoming aspect-ratio things are better but I still run into some limitations in especially dynamic web apps / data visualizations I make and I usually resort to calculating the widths/heights in javascript so I can have full control.
2. Going into the third dimension
I'm not a big fan of the z-index / position absolute / relative stuff going on in css. I'm not sure what a better way would look like, but every so often I run into weird issues where a parent somewhere is relative and it messes up an element I'm trying to absolutely position.
Most things can be worked around but it's still annoying and usually take longer than what I feel they should.
Apart from these, most of the quirks of CSS are very mild and can be worked around easily. I actually find writing CSS quite enjoyable day to day.
I wrote up this guide about CSS floats, for example: https://pavpanchekha.com/blog/css-floats.html It is just about complete, but it also took me about a year of work to get that understanding (from reading the spec, reading browser code, trying many many examples) and it lead to a published paper. And even then, it doesn't talk about negative top margins or refer to actual implementations!
* Stacking context [1] — how individual layers interact with eachother to form a layout.
* Box model [2] — the most important properties that give an individual element its dimensions.
[1]: https://tiffanybbrown.com/2015/09/css-stacking-contexts-wtf/