CSS Changes not showing up in Browser

Hi all,

I’ve been stuck on this issue for a few days. The code works perfectly fine on codepen.io (https://codepen.io/benzo61/pen/OJPmVev), however, when I open the code via live-server on Atom or similarly in Backets it doesn’t recognise the element class names. This cause the white button to appear transparent, the icon to be incorrectly sized and all the positioning of the elements is off among other things.

Using the dev tools in chrome I noticed the css shows the old class names such as “.heading-primary-main” rather than the class names in the code, which is “.heading-primary–main”

So far I have tried uninstalling the liver-server package, deleting all cache, disabling cache and tidying my folders. Nothing seems to work!

Can someone please provide some advice.

Can you post a screenshot of your folder structure? Are you seeing any errors in the browser console?

Hi Randell

I have attached a screenshot above. The browser doesn’t come up with any errors either.