Overlapping text problem

As part of practicing HTML and CSS I’m working on coding my blog post vs using a template. In addition to trying to learn code, I’m also an author and thought this would be a good way to build portfolio examples and improve my author website at the same time.
I’ve run into a problem with the text overlapping when I go to publish the blog to my website, but it’s a problem that doesn’t appear when I’m checking my code locally.

What I see when I run my code locally is:

But when I check it on my website I see:

The spacing on everything has been changed, resulting in overlapping of the text in the title as well as crowding in the subtitle (Also the title is listed twice for some reason). I’m guessing this is something to do with the website I use to publish my author website on, but I haven’t been able to figure out how to fix this on my own. I’m hoping someone in the community can help me figure out this problem, since I’m sure it will be something I see again once I start doing this professionally.

The place to input code on the website looks like this:

Here is my HTML code for the section with the problem:

And here is my CSS:

Does anyone have any ideas on how I can fix this problem? I’ve already tried resetting the default margins ( *{ margin= 0; padding= 0;), but that had no affect. I’ve also tried adjusting margin within .title with no effect, as well as changing the font size in the same section. I’ve also gone on to the devtools section and tried to problem solve from there, but again, no success.
Thanks in advance for any tips/advice and help.

Hi @dickykitchenjr
it’s the line height: add line-height: 1.5; to your headline selector.
You paste html code into the editor of your CMS and have the headline added to your site by the CMS as you typed the headline in there as well as by your html.

1 Like

That fixed it!
Thanks @mirja_t :grinning:
I really appreciate the assistance with this.

1 Like