I’m not exactly sure what it is, but you may have some invalid hidden character or something immediately after your #nav-bar CSS section. It would seem there is something wrong at the closing } or immediately after it. Anything immediately following your nav-bar section doesn’t work properly. If you move the whole block of nav-bar to the end, it shows a red error immediately after it but I wasn’t able to identify or remove any invisible characters or anything.
The way I fixed it… highlighted and deleted everything between the end of display:inline-block; and start of #header-img{ and retype it. Its just some empty lines and the closing }, so just delete those lines and the }, retype the } and then it seems to work.
#nav-bar {
position: fixed;
top: 0px;
display:inline-block;
<start selection
} Delete all between these markers
<end selection
#header-img{
height:500px;
}
Now thats a fun story… dump luck… or trial and error through years of troubleshooting experience.
I mean, first I tried modifying settings, and nothing I typed changed anything. Then I tried simpler stuff, like setting background color and things, and nothing worked. That’s when I felt something was wrong.
So tried styling other items with that section, didn’t work. I thought maybe some invisible item was using the name header-img but couldn’t find it. I then created a new header-img section elsewhere, and that did work, so now I knew the problem was related to that selector section… so I deleted and created a new one there, and it didn’t work, so the problem wasn’t the name, but the location of where I was typing it. Tried moving things around, and that’s when I saw a red error at the bottom of nav-link when I put it at the bottom of the CSS file.
So I put it back in its original position, and started deleting lines of it one at a time, didn’t work. Deleted the whole thing, the rest did work. Put it back, and deleted the bracket at the end… then other code worked… so just determined that’s where a bad invisible character or other corruption must lay.
Deleted that area and replaced it, problem solved… still not sure what was there… maybe a piggy-backed character from a copy/paste or something. Thought about copy and pasting into a software that allowed me to view invisible characters, or write a function to go through characters and get the ASCII or something… but it was late, and I was tired… guess I’ll never know.