It's the bottom border that looks off when wrapping. Since the headings are already distinguished by whitespace, size, weight, and color, the border doesn't really add anything. Overall, the page is not conveying a hierarchy to me at all. It looks very disjointed.
My preference would be to remove the borders/underlines, also remove the bold, and make the margins equal above and below the h3+ headings. If I were to actually use more than three headings, I'd probably do something completely different at the deepest levels (e.g. inline the headings or indent the whole text).
But I think we agree that it's worth some effort to fix up the browser's default styles. It's too bad they can't all just switch to something like Firefox's reader view without breaking the web.
So, I'm really not a graphics designer, though I know what I like, what I don't like, and have a pretty good sense for what does and doesn't work well across a large range of display sizes.
This design isn't responsive other than having some reasonably sane defaults. It's derived from a more complex style that does resize headers and such as the pagesize varies. As far as niggling over header formatting ... that's getting into layout-weenie stuff and sweating the small stuff. The point is to have distinguishable headers. How you distinguish them ... is somewhat moot, though size, colour, underline, margin, typeface, etc., are some obvious dimensions. What I've given here does not, I'll posit, for the most part suck.
It may offend some sensibilities.
What I've started taking a strong liking to, actually, is using CSS numbering to create numbered sections (see https://reddit.com/r/dredmorbius/wiki/faq for an example -- I actually contributed the Reddit code, all one line of it, to enable this). It's a bit technical-documentation-ish, but tends to give a sense of place and structure within a document.
In practice, having too many levels of nesting is probably distracting. A book might have: Parts, Chapters, Sections, and possibly Subsections. That's H2 - H5 in a standard HTML hierarchy, with H1 reserved for the title.
A paper will rarely have more than Sections and Subsections -- H2 and H3 elements, plus h1 for the title. My reddit styling and docs tend to reflect this.
I will use more detailed breakouts when I'm outlining stuff, though I'll make pains to try to flatten the structure reasonably as I can. I'm often digging in the weeds myself, in complex topics, and achieving a workable structure is a considerable effort.
My preference would be to remove the borders/underlines, also remove the bold, and make the margins equal above and below the h3+ headings. If I were to actually use more than three headings, I'd probably do something completely different at the deepest levels (e.g. inline the headings or indent the whole text).
But I think we agree that it's worth some effort to fix up the browser's default styles. It's too bad they can't all just switch to something like Firefox's reader view without breaking the web.