I have an interesting CSS selector here:
<div class="gridcell" id="danger">
<p>fort_sumter</p> // this would be styled
You have some strange Unicode quote there, specifically code point 8221 "Right Double Quotation Mark". It should be code point 34 "Quotation Mark".
Try to find the difference between the two: U+8221:
This could be caused by some interesting system keyboard settings, or if you wrote that CSS in a text processing application (e.g. MS Word, LibreOffice Writer, Google Docs, etc)
With the risk of repeating other answers, the canonical way of selecting by ID in CSS is by using the
# character, followed by the ID you want to match:
As a stylistic note, since IDs are unique, consider using a more descriptive name, or switch to a class.