To make your HTML code tags more responsive and stop them overflowing off the side of the page, wrap them in <pre></pre> tags and apply white-space: pre-wrap; to them like this:


<pre style="white-space: pre-wrap;">
    <code>
        .my-example-code {
            color: deepskyblue;
            margin: 5px 10px;
        }
        .more-example-code caption {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
            color: #6c757d;
            text-align: left;
            caption-side: bottom;
        }
    </code>
</pre>
White space pre wrap CSS browser compatibility

The white-space:pre-wrap; CSS property is supported by most browsers giving you 93% global compatibility.

If you want to spice your HTML Code blocks up a bit try adding the highlight.js library. It automatically detects which language you are using and come with loads of built in styles like this Monokai style:


.my-example-code {
    color: deepskyblue;
    margin: 5px 10px;
}
.more-example-code caption {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: #6c757d;
    text-align: left;
    caption-side: bottom;
}