When I set the body's background color to black, it stays white

Question

I'm trying to make a flat black background below the navbar but that seems to be an issue. This is particular concern because I wanted to add some JQuery functionality to the buttons on the right to cause the background color to change when they're pressed. But if something as simple as this, though fundamental, doesn't work...

Currently another issue is this thick, white strip. I honestly don't know what's causing it. I assumed that just having a white AlarmTime would mean floating white text on the page surrounded by a black background, but that's clearly not the case. It's left as the default black now simply because it's effectively invisible otherwise. For the record, it's not the flexbox nor the div causing the border because it still shows up with both of them deleted.

https://jsfiddle.net/xjrqm1k3/

    body
{
    background-color:black;
}

What did I do wrong?

Edit: I thought you had to have a period before the name of the selected item to select a class. I guess I might've been missing something in my code? The fiddle I posted doesn't seem to have a period Fiddle, and it's what I Copy-Pasted from my work. Do indents cause Visual Studio to count the item as a class?

Edit: Regardless, thanks for the help and information; it works.

Answer 1

You were doing

.body

meaning class with name body

change to body

Also you have to add !important since you're loading bootstrap after this CSS file.

See fiddle

Answer 2

It's probably being overriden by something else. Try this:

    body
    { 
           background-color: black!important; 
    }