This is a common occurence. Many themes provide front-end styles that they don’t enqueue in the Editor, so what shows on the front end of the website doesn’t exactly match what’s in the Editor. The Block Editor has brought the Editor much closer to the front end view, but they’ll likely never be quite exactly the same.
“Additional CSS” is the correct place to add CSS to adjust only the front end. However, the specific code you selected is outdated, meant for the Classic Editor. To affect an image in the Block Editor you’re using, you would need to use
.alignright img { }
instead of
img.alignright. It also looks from the screenshot like you may need to tweak the paragraph styles, not just the image styles. Most likely either the image is not floated, in which case you could try
.alignright img { float:right; }
or the paragraphs are cleared, in which case you could try
p { clear:none; }
but it will all depend on how your theme has structured their CSS. They may use more specific styles, or different layout types. You’ll likely need to read up on CSS and inspecting elements to determine what CSS will make the layout look the way you want. Alternatively, you could try other themes to see if there’s one that more closely matches the Editor.