Adding a link to an image changes its alignment on page

I'm having a weird situation using the subtheme where whenever a link is added to an image that is already properly aligned in text, that assigned alignment is ignored. I also tried this on the Adaptive theme (for another site I was working on) and it works OK there, so I suspect it might be an issue with this W3CSS theme.

I'm using Full HTML for Text format. When I see that it does not work, I've gone into Source mode to copy the HTML here.

First look at the attached image Alignment-0.jpg. This shows the basic text and image as it appears in the editor, before any links were added. The image is aligned right, and has extra blank material on the image's canvas on the left and bottom so that the text will wrap around it correctly (there will be more text when I put the real material on the site).

Here is the raw source code for that section, automatically created with no modifications on my part:

<p><img alt="Woman using laptop at home office" data-align="right" data-entity-type="file" data-entity-uuid="1884dd90-1ac5-4807-9b5e-7269329151c2" src="/sites/default/files/inline-images/laptop-home-office-500x300_2.jpg" /><span style="font-size:24px;"><span style="font-family: Arial,Helvetica,sans-serif;"><strong>In Your Home</strong></span></span></p>

<p><span style="font-size:16px;"><span style="font-family: Arial,Helvetica,sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan risus sed justo vulputate volutpat. Proin pharetra arcu lorem, ac vulputate lorem pellentesque sed. </span></span></p>

The attached image Alignment-1.jpg shows how it appears on my web site. Looks fine so far - exactly how I want it to be.

Then I re-edited the page. All I did was click on the image to select it, clicked on the Link icon at the top of the editor, and then added the following as the URL: /home-use. It's another page on my site.

Here is how the source code appears after that link was added:

<p><a href="/home-use"><img alt="Woman using laptop at home office" data-align="right" data-entity-type="file" data-entity-uuid="1884dd90-1ac5-4807-9b5e-7269329151c2" src="/sites/default/files/inline-images/laptop-home-office-500x300_2.jpg" /></a><span style="font-size:24px;"><span style="font-family: Arial,Helvetica,sans-serif;"><strong>In Your Home</strong></span></span></p>

<p><span style="font-size:16px;"><span style="font-family: Arial,Helvetica,sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan risus sed justo vulputate volutpat. Proin pharetra arcu lorem, ac vulputate lorem pellentesque sed. </span></span></p>

It looks perfectly fine to me. All that was changed was <a href="/home-use"> was added right at the start of the image and a </a> added to complete the image definition and right before the text begins. Looks like perfectly correct HTML to me. And it still says to align right.

And yet the attached image Alignment-2.jpg shows how it now appears on my website. The image appears to be aligned left and the text all starts at the end of the image.

Please advise why the alignment specified in the code is being ignored when the image becomes link-able, and what I can do to get around this.