"sm:block" class is not overwriting "hidden" class after passing the "sm:" breakpoint

[WaterlessPiano2]

I am following the navbar tutorial on youtube and I am stuck on this part, where the sm:block class should override the hidden class when the screen width hits the sm: breakpoint. This almost exactly the same example works as expected, where the items show when the page's width is increased.

However, when I try to implement this on my project which is created using npx create-next-app --example blog-starter-typescript. This is where I got it from, the items on the navbar don't show when the page width is increased.

Here is the exact spot in my repo where this doesn't work.

Can anyone see what I am doing wrong?

[WaterlessPiano2]

"Dark Theme for Chrome" extension has been injecting styling that had display : hidden !important . Removing that extension has resolved my issie

[JanitaM]

OMG this was driving me crazy. I have/had the same problem - hidden was overriding md:block. I changed my Windows theme to light and it works. The weird thing is I've had the dark theme turned on forever, and the same code worked a couple of weeks ago.