I find it's quite a bother to have to do all the CSS necessary for good reflow on a number of devices, so I too just have everything just spill to the ends, and just do reader mode on devices. But I don't really know much CSS apart from the really basic stuff, and haven't ever sat down to see how it would be done.
max-width: 700px; margin: 0 auto;
This would make it look great on pretty much all screens.
Just holding up a book to my screen, 700px is about the width of the text in a mass-market paperback. But the reading distance for a screen is much larger than the reading distance for a book, of course. And hardcovers or trade paperbacks have wider text columns than that, of obviously, and are generally somewhat nicer to read than mass-market paperbacks... though also often get held at slightly larger reading distances.
You hold a book closer to your eyes though than your screen.
Both have about the same line length, as you point out, but the book's font is smaller. The website font is much larger - to make up for the greater distance between the screen and your eyes.
I think 700px would be wide enough, 800px would also work.
From what I've read, going wider than about this at around a 14px size font and it becomes increasingly difficult for the eye to track between lines.
On a phone, a max with of 700 or 800 px obviously wouldn't apply since the phone screen is smaller.
On this site, I usually zoom in to 150% to 200% on my computer to make the font size large enough to comfortably read.
If the book's font is smaller, but the lines are the same width, that means more words per line in the book, yes?
And each line is taking a larger fraction of the visual field, since the book is closer to my eyes.
Basically, if we assume books are somewhat optimized for ease of reading (and to a large extent they are), websites should be aiming for the same angular sizes as books. The reading distance is larger, so the physical sizes should be larger: larger fonts and wider lines...