Sigh. I don't understand.
Why does the left border of the grey rounded DIV not line up vertically with the surrounding text?
All code is in this file.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non semper, inquam; Bestiarum vero nullum iudicium puto. Immo videri fortasse. Mihi, inquam, qui te id ipsum rogavi?
Sedulo, inquam, faciam. Occultum facinus esse potuerit, gaudebit; Ut pulsi recurrant? Vide, quantum, inquam, fallare, Torquate. Id Sextilius factum negabat.
Verum hoc idem saepe faciamus. Satis est ad hoc responsum. Nihil illinc huc pervenit.
Duo Reges: constructio interrete. Etiam beatissimum? Itaque contra est, ac dicitis; Quis istud possit, inquit, negare?

I'm completely stumped. What bloody obvious, dumb, must-be-blind thing am I missing?

That demo_pic.png is a mesh with transparency, so you can see what is 'behind' it. Exposing the border of the DIV, which you move by adjusting the left-margin value of its class definition.
Apparently the left border of the DIV is referenced to the left edge of BODY, not the RH edge of the floated image. And the text inside the DIV is horizontally aligning to text outside its container DIV. Both are just wrong. (I think.)

I hesitate to assume a html bug. I only have two browsers installed (Opera 12.15 and Firefox 38.0.1, yes, I know, old) and they both perform exactly the same with this. But why wouldn't they work, this is old stuff, plus it's sooooo simple (I think, could be wrong.)
Someone shows me it acting wrong in Chrome Version 55.0.2883.87 m (latest) too.

Hunting answers

Discussion: http://www.eevblog.com/forum/chat/'simple'-aka-dumb-html-formatting-question/ 

http://www.w3schools.com/html/html_blocks.asp
http://www.w3schools.com/css/css_inline-block.asp
This file from: http://everist.org/temp/myst/test.htm