The following article describes quite well how horizontal spacing in lists behaves across different browsers, based on the browser's default user-agent stylesheets and list-related styles set by an author (including an embedded live example to play around with different settings in this regard):
"Everything You Need to Know About the Gap After the List Marker"

To roughly summarize and answer the question:

• "Browsers apply a default padding-inline-start of 40px to <ul> and <ol> elements."

• Default built-in list markers have a small "gap" following them, while custom markers do not by default.
• Chromium still has a bug that produces a larger "gap" after the marker when list-style-position is set to inside instead of outside for lists that do not have ordinal number markers.

"... three shots of the same code ..."

Since the (CSS) styling is clearly different between the three examples, I assume that the question is saying that the markup is the same for all three.
There may be more styling involved in the examples that changes the horizontal spacing of the list elements. Please provide the full code, including the three different CSS styles, so that this can be addressed in more detail.

Also note, as already mentioned in other answers, that the markup is incorrect, as each nested ul element must be a direct child of an li element - see "Proper way to make HTML nested list".