Message Templates - HTML Renders Differently

I have created (bought and edited) an HTML responsive email template for customer account registration notifications.
I used it for modifications visual studio and tested it in local browser. The page renders beautifully without any issues.

When I copy and paste the same source code into the body of the message template editor, the CSS layout shifts.

I tried moving the CSS styles into the body of the HTML page (from the head section), but even then the CSS layouts are changing around the area for the logo.

Also, I notice the javascript is not working on the rendered page and in fact, the javascript just disappears when we switch between the source code view and design view.

Please see the code below for reference:

https://ctxt.io/2/AAAQwECZEw

Try disabling the rich-text control for Message Templates from settings, it could be formatting/re-encoding your codes. Try disabling that and put the HTML again using text-area control and check if it works or not.

You may need to adjust these Settings:

adminareasettings.richeditoradditionalsettings
adminareasettings.richeditorallowjavascript
adminareasettings.richeditorallowstyletag

New York wrote:

For adminareasettings.richeditoradditionalsettings the value is
settings.plugins.push('textcolor'); settings.toolbar += ' | forecolor backcolor';

What should be changed here.

For remaining two settings I changed value to true.

The problem is still the same.. can anyone suggest please?