Using the 'inside' parameter in 'list-style' have converted bulleted and numbered lists to 'hard-reading' thing. Blocks merge and offset from the position of the markers does not help.
Left: expected, right: actual
Maybe we can remove it from .content ul ol?
I understand - really small screens may have problems with reading of thin column. But I think the best solution is - to add @media rule for small screens.
Note, the margin to the left of the list items
= Developer notes
Add a padding left e.g.
list-style: square outside;
There are several articles with 100+ ol list items, we need to make sure that indentation (`outside`) works well there. Example: https://en.m.wikipedia.org/wiki/Singapore
= QA instructions
~~Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Test_lists on a range of browsers. ~~
**Browser & device:** iOS/Chrome & Safari, Android/Chrome & Safari, desktop/Chrome&Safari
- Visit http://reading-web-staging.wmflabs.org/wiki/Puerto_Rico?useformat=mobile#Notes
- Ensure that the list item indicators do not stick out beyond the left-edge of the content container. In other words all of the content should be flush on the left side. Here is an example of what it should **not** look like:
== QA Results
| Status | Details |
| ❌ Failed |T150377#4962190|