Why do images inserted in the post content via the_content() go off the max-width?

The width property of the parent DIV element does not apply to it’s children. An image within the .col-md-10 can overflow it’s parent, and will be visible if the parent doesn’t have the overflow:hidden property.

To fix this, you can set try and make the images responsive. Here’s how to:

.single-post img {
    max-width: 100%;
    height: auto;
    display:block;
}

This will make sure your images don’t go wider than their parent element.

Bootstrap also provides its own class for responsive images. The class name is .img-responsive, and you can pass it to your functions as an argument while outputting post thumbnails, for example:

the_post_thumbnail( 'thumbnail', [ 'class' => 'img-responsive' ] );