Why are objects pushed to each end of a container with an awkwardly large gap?

[HariSekhon]

In the middle of the diagram below, the Linux icon and distros container are in the same Linux container but for some reason they are anti-magnetized to opposite ends leaving a large awkward gap in the middle instead of being evenly spaced and I cannot see why or how to fix this.

The source code: https://github.com/HariSekhon/Diagrams-as-Code/blob/4a7bc6d0fd1945106c3e49cc6b7948021d8f7593/web_clients.d2

I believe that object placement control is one of the biggest challenges with D2 or even other alternatives... any suggestions or workarounds would be most welcome, thanks!

[HariSekhon]

I tried linking the Linux icon and the distros container to give the dagre engine a hint to bring them closer together but that caused them to separate into different latitudes which looked even more awkward.

And yes, as per the description in the readme, I really did do this diagram to try to teach my kids how the interest works, but it might be useful to explain to some users too 😅

ps. you may be interested in better diagrams in the readme of that same repo.

[HariSekhon]

I have since fiddled with this even more, and this is the latest:

https://github.com/HariSekhon/Diagrams-as-Code/blob/master/web_clients.d2