添加具有不同颜色的跨度实际上并没有改变颜色

Question

I made a small index page and made the logo using text and styling, and added a span to change the color of one of the words but it's not actually changing. I'm not sure why. I made a span with a class of .highlight and gave the special color to that .highlight and even tried adding !important but it still isn't working.

This is the page - https://youssefwaelnasr.github.io/hat-manufacturers/ -- the word "Hat" is in a span with the class of .highlight that has a different color, but it's not working here.

Here's the GitHub repo with code in it (index.html and css/style.css) - https://github.com/youssefwaelnasr/hat-manufacturers

Thanks in advance.

Answer 1

Your html is invalid

 <span class="highlight"></span>Hat</span> Manufacturers

Should be

 <span class="highlight">Hat</span> Manufacturers

Answer 2

In your code at line 17 on your GitHub file (index.html), the <span> tag is not correct.

Replace the line 17 :

<h1><i class="fab fa-redhat"></i> <span class="highlight"> Hat</span> Manufacturers</h1>