Hey all, I wanted to use HTML to create a nice looking body template using HTML
here is what I got
<body style="margin: 0; padding: 0; width: 100%; font-family: 'Roboto', sans-serif; color: #333;">
<div style="width: 100%; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div style="text-align: left; padding-bottom: 10px;">
<h1 style="font-size: 22px; color: #333; margin: 0;">You Have a New Mention!</h1>
</div>
<div style="font-size: 16px; text-align: left; margin-bottom: 15px;">
<p style="margin: 0; color: #6c757d;">You've been mentioned in a comment on the following project:</p>
</div>
<div style="font-size: 14px; color: #555; margin-top: 5px; text-align: left;">
<p style="margin: 5px 0;"><strong>Project:</strong> <<[Project].[Project Title]>> </p>
<p style="margin: 5px 0;"><strong>Timestamp:</strong> <<[Comment Timestamp]>> </p>
</div>
<div style="font-size: 18px; font-weight: bold; background-color: #e6f7ff; color: #0056b3; padding: 15px; border-radius: 5px; margin-top: 20px; text-align: left; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);">
<p style="margin: 0;"><<[Comment]>> </p>
<p style="font-size: 14px; color: #333; margin-top: 10px;"><strong>Comment By:</strong> <<[Comment By].[Name]>> </p>
</div>
<div style="font-size: 12px; color: #999; text-align: left; margin-top: 20px;">
<p style="margin: 0;">This is an automated message from CRIB Project Management Hub. Please do not reply.</p>
</div>
</div>
</body>
My problem is it looks great in the .html file but the spacing is fully messed up
Now I am very new to this HTML in Email Body Stuff. So please let me know where I went wrong and here is what my bot looks like for everyone’s reference.
If you want additional information please let me know
Thanks in Advance 
I just asked chatgpt to write it all again without any indentation in a single line and boom works like a charm.