How do I isolate the FreeCodeCamp Testing Script's styling from the Header styling?

How do I isolate the FreeCodeCamp Testing Script's styling from the Header styling?
0

#1

I’m making the Product Landing Page project, and I’ve run into this issue where the testing script takes on the css styling of the Header, where I’ve tried to use a CSS Grid to separate the elements. Thus the testing script which I think is inserted into the header, takes on the header’s CSS. This results in weird displays of the test list, which I want to overcome.
Codepen link: https://codepen.io/arcinglight/pen/zLEaMe


#2

This is a known issue with the way the tests use css. You could avoid it if you styled you elements via classes and not use general selectors like ul or li or p or h1, etc… If you want to reference p elements, just make sure you reference them within an element with a specific class. For example .classmate > p { }


#3

Thank you. I’ll try your fix. The issue isn’t a huge deal but I did want to know if I was making a mistake somewhere.