1) Add box with coloured fill? 2) Shorten box widths?

It looks like you have already done this.
I see
<div style="border: 1px solid red; padding: 5px; margin: 5px;clear:both;width:500px;">
While this works it is not respected as best practice. The modern concept is that layout and presentation is controlled by the css files (this permits flexibility like responding to various displays), and have the content in the page itself. Embedding layout codes in the div statement breaks this separation.
Better practice is to put a class in the div, and put the styling in the css file. So the div would change to:
<div class="quote">
and in your style.css file you would have:

.entry-content .quote {
 border: 1px solid red;
 padding: 5px;
 margin: 5px;
 clear:both;
 width:500px;
}

This will style all such blocks the same, if you want to make it specific to this post only you would change the leadin to:
.blog-1842 .entry-content .quote {