Replicate Microsoft support article using SharePoint modern pages

I get what you're trying to do cuz I tried to do the same thing. The difficulty is the the Microsoft documentation pages are actual web pages using HTML, which SharePoint is not. 

So here's where I ended up.

• Manual numbering - it's lame but it works
• Use 2 columns - put the text in the one and the image in the other, then use sections for each step to keep the text parallel to the image. I tried using spacer web parts to fill the gaps and those disappear in mobile view, but that isn't necessary if you use a new section for each step. Down side to this is that large images can create gaps that fall off screen, so make sure it's clear to your users that they need to keep scrolling down. Alternating section background colors can help with this. Using a consistent size for your images also helps, but isn't always possible depending on your content. ALWAYS CHECK HOW THE LAYOUT LOOKS ON SMALLER SCREENS. 
• Or if you want a single column of content down your page, skip the numbering altogether - use heading styles for major steps and numbering for sub-steps.

Unfortunately, we can't do anything about justifying the image. Using a consistent image size or at least a consistent width helps keep them in line, particularly if you go with the 2 column method.

I eventually went with bullets 1 and 3. I use manual numbering for the main heading steps (cuz those rarely change) and autonumbering for the detailed sub steps. It's fast, easy and always displays properly regardless of screen size.