In Chrome, open the dev tools, click the Device Toolbar button near the top left, and in said toolbar set it to Responsive and play with the viewport width (or set it to iPhone 5). It's this particular example page at fault for not realizing that "list-style-position: outside" means that it _will_ overflow which means that for said overflow to not fall outside the viewport, you need a container (which in the case is the body element) having some absolute (not relative to the viewport like this example's small percentage) padding/margin at least as large as the overflow. A properly executed version of the hanging technique would do exactly that.

It's not the curved edge that is causing the problem. The bullets are actually partly off the actual edge of the screen and are being clipped.

If I rotate the device to landscape mode, then the page adds some margin and the bullets aren't clipped any more. I didn't look at the page source in detail - perhaps it is using some kind of media query on the width and reducing the left margin on a narrow screen.

I think the real lesson here is that many of these tricks to achieve some kind of "typographical correctness" are simply a bad idea. Users don't expect it, and it's very likely to break on some device you haven't tested.

People who view your page aren't looking for typographical correctness. They are looking for something easy to read that is familiar and comfortable and works on whatever device they happen to be using. The more tricks you put in, the less likely you are to achieve that.

And honestly, some of this just seems weird, even for print. I don't read much on paper any more, it's all phone/PC/Kindle. But I just thumbed through a bunch of my old books, and none of them follow the "correct" conventions. Bullet lists, (a) (b) (c) lists, and 1. 2. 3. lists are all indented much like the default web formatting. They don't outdent a quote mark at the beginning of a paragraph, the quote mark just appears in the first column like any other character.

I don't know where the author got these ideas about "correctness", because I sure don't see it in my professionally typeset books.

I disagree. You always leave the edges empty or at least put non-essential information there. There are so many contexts where the edges aren't there, such as:

- print (not really applicable to the web) - projectors/TVs (my TV cuts off ~5% from each edge) - sticky notes on the edge of the monitor - anti-glare screen covers

It also feels cramped to read at the edge of the screen. I like having the negative space there to frame the text.