Sorry for the delay. I do see what you mean. I love what you're trying to achieve. I can see it's really frustrating to try and figure out in our editors. :(
I took a look and moved some stuff around in a test copy of your post. I have a couple of tips for making this work.
The major one is to make sure that the div class="alert-note" tags only go around the span tags and the titles themselves. There were two images that I moved in the Text editor that had been included inside of the div tag (before the /div happened). This is what was causing them to overlap with the yellow boxes.
The next part is about aligning images next to each other. If you're going to use captions like you did under the second "Fast or Fable" section, the alignment will have to be fixed in the customizer unfortunately. Because the margins are created outside of the editor itself. However, if you add asides as you did in the third "Fast or Fable" section, you'll be able to adjust the margins within your Text editor.
Now, the way I was able to figure out and adjust the margins for the images to get them side by side was by using the "Inspect Element" tool in Chrome. Both Firefox and Internet Explorer also have this tool built in. Safari has it as well, although you'll have to turn it on by going to Safari > Preferences > Advanced and checking the box at the bottom for "Show Develop menu in menu bar".
Here's a quick run down on how to use the Inspector:
The inspector will usually highlight margins in orange and you'll just need to adjust them on your images until they don't overlap anymore. For example the styles I added to the two images under your third "Fast or Fable":
I've created a new draft post in your dashboard titled "Fast or Fable - Shawna's edited version". You can see the various style changes I made there. In order for that image with the caption to work correctly, you'll need to add this CSS to your Customizer:
I know that's a lot, so let me know if I can help you sort any of that out. :)