Div not 100% height; Div does not change BG Color

[silverRainfall]

Hello everyone, thank you for taking the time to assist me in my learning process.
On kali.org, you can see that its design has that styling in which a  given background color fills the 100% width and height of the screen, and when you scroll down, another bg color fills the 100% width and height of the screen. (The height percentage can seemingly vary here, though).
I am trying to imitate this effect, but as a CSS neophyte I am not succeeding.

First of all: the browser does output the width to be 100%, but not the height.
Also, I have assigned some divs to have a different bg color, but this color is not being applied.

I have used the universal selector to apply border-box to everything.
My understanding was, if I am to allow an element to be set to 100% height, I am to use the HTML and BODY style selector and apply 100% height.
I then applied 100% height to my divs  via the div style selector(doesn't work).
Then I made a .2 class that I applied to every second div in which I assign a white background color. This color is not applied.
My understanding was, as the div is already styled via the div type selector, applying a class to some of the divs will still make the type selector apply all its styling, safe but where I have made an overriding change in the class selector. In this instance, the div type selector has the background-color set to grey, and the .2 class selector has its background-color set to white. 

Hence:

<div>Grey BG</div>
<div class="2">All the styling of div but has a white BG</div>
<div>Grey BG</div>
<div class="2">All the styling of div but has a white BG</div>

Your assistance is much appreciated, as I can truly not see what I must be doing wrong.

My example HTML/CSS is very small.
The index.html can be found here: https://cellseven.w3spaces.com/
HTML/CSS on JSFiddle: https://jsfiddle.net/afg5tsyd/
HTML/CSS in .txt file:
The HTML code here: https://cellseven.w3spaces.com/html.txt
The CSS code here:  https://cellseven.w3spaces.com/css.txt

                     Here is the relevant CSS:

*{
    box-sizing:         border-box;
}

html, body{
    height:             100%;
    margin:             0;
    padding:            0;
    background-color:   #161a1d;
    font-family:        'Montserrat Alternates', sans-serif;
    color:              #CDCDCD;
}
/* SETTING THE BG COLOR TO GREY AND THE WIDTH AND HEIGHT TO 100% */
div{
    text-align:         center;
    margin:             20% auto;
    width:              100%;
    height:             100%;
    background-color:   grey;
}
/* THIS CLASS IS INTENDED TO BE ADDED TO EVERY SECOND DIV, CHANGING THE BG COLOR WHILE MAINTAINING DIV STYLING */
.2{
    background-color:   white;
}

                 

                     The relevant HTML:

<div><p>My name is Logan Throne, <br><br> Here you will find my publications on Oriental philosophy.<br> Subscribe to the <a href="#">newsletter</a> or follow me on <a href="#">X</a> for updates.</p>
<h1>emptycloud.io</h1>
</div>

<div class="2">
<h2>Publications</h2>
<h3>Book Title 01</h3>

<p class="bookDescription">Lorem...</p>
</div>


<div>
<h2>Publications</h2>
<h3>Book Title 02</h3>

<p class="bookDescription">Lorem...</p>
</div>


<div class="2">
<h2>Publications</h2>
<h3>Book Title 03</h3>

<p class="bookDescription">Lorem...</p>
</div>

silverRainfall