Could not change footer's backgroud color

Question

I'm building a website on Github page and I am trying to change color of footer. As you can see, I made with class "footer" . On CSS, I put background-color property and set as #000000. But, I still can't see background color with black on desktop.( I can see on mobile page because I set media query) The Code is below.

@media screen and (min-width: 1000px) {

html, body{
  font-family: "Comfortaa";
}

.header-logo{
  float: left;
  padding: 10px 30px;
}

.header li:hover{
  border-bottom: 2px solid #24ABE2;
}

.header a{
  float:left;
  display:block;
  color:black;
}


.header-link li{
  float: left;
  padding: 5px 60px;
  font-size: 20px;
  color:#24ABE2;
}

/* Dropdown Button */
.droplist{
  border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 240px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 20;
  margin-top: 29px;
  height: 210px;
  color:#24ABE2;
}
/* Links inside the dropdown */
.dropdown-content a {
  color: #24ABE2;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  z-index: 20;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  border-bottom: 2px solid #24ABE2;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: white;
}


.footer-logo{
  float: left;
  padding: 15px 20px;
  width: 300px;
  height: auto;
  margin-left: 30px;
  margin-top: 20px;
}

.footer-list{
  margin-top:10px;
  font-size: 20px;
  color: #ccfbff;
  float: right;
  padding: 2px 8px;
  margin-right: 40px;
}

.footer-list li{
  padding: 10px;
}
 
}


@media screen and (max-width: 1000px) {
html, body{
  font-family: Nunito;
}


.header-logo{
  text-align:center;
  margin-left:20px;
  padding: 10px 30px;
}

.header li{
  display:none;
}
  
.header-link{
 display:none;
}

.footer-logo{
  padding: 15px 10px;
  width: 300px;
  height: 90px;
  margin:auto;
  text-align:center;
}

.footer-logo img{
  width: 300px;
  height: auto;
  margin:auto;
  text-align:center;
}

.footer-list{
  display:block;
  margin:auto;
  font-size: 20px;
  color: #ccfbff;
  padding: 2px 8px;
  text-align:center;
}

.footer-list li{
  margin:auto;
  padding: 5px;
  font-size:20px;
  text-align:center;
}

}



/* CSS for default design */
html { scroll-behavior: smooth; } 

html, body{
  height: 100%;
  width: 100%;
  margin: 0px 0px 0px 0px;
  z-index:-10;
}

/* Settings of a tag for whole page*/
a:link {
  text-decoration: none;
  cursor: pointer;
}

a:visited {

  text-decoration: none;
  cursor: pointer;
}

a:hover {
  text-decoration: none;
  cursor: pointer;
}
a:active {
  text-decoration: none;
  cursor: pointer;
}

.header {
  border-bottom:2px solid #0E76BC;
  background-color: white;
  height: 60px;
  position: fixed;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  opacity: 90%;
  margin: 0px 0px 0px 0px;
  z-index:10;
}

.header-logo{
  width: 300px;
  height: auto;
}
  
li{
  list-style: none;
}

.footer{
  height: auto;
  background-color: #000000 !important;
  width: 100%;
  margin: 0px 0px 0px 0px;
}

.footer a:link {
  color: #ccfbff;
}

.footer a:visited {
  color: #ccfbff;
}

.footer a:hover {
  color: #ccfbff;
}

.footer a:active {
  color: #ccfbff;
}

<div class="footer">
      <img src="https://i.ibb.co/p4LvvdH/Copy-of-LOGO-White.png" alt="SLED Logo" class="footer-logo" />
      <div class="footer-list">
       <ul>
        <a href="#top"><li>Back to Top</li></a>
        <a href="https://instagram.com/jcbmssledteam/"><li>Instagram</li></a>
        <a href="https://www.facebook.com/jcbooth.sled"><li>Facebook</li></a>
        <a href="mailto: jcbms-sled-team@mail.fcboe.org"><li>Jcbms-sled-team@mail.fcboe.org</li></a>
        <a href="https://www.fcboe.org/jcbms"><li>J.C. Booth Middle School</li></a>
        <a href="https://www.fcboe.org"><li>Fayette County Public Schools</li></a>
       </ul>
      </div>
</div>

Answer 1

try something like this

.footer
{
  min-height: 100%;
  background-color: #000000 !important;
  width: 100%;
  margin: 0px 0px 0px 0px;
}

set min-height: 100% instead of height:auto from .footer class

Answer 2

Whenever we give float property on child item then parents give automatically own height to 0, so please put it:

    .footer:before,
    .footer:after
    {
        clear: both;
        display: block;
        content: '';
    }

Answer 3

The reason is because you set your footer height to auto without defining a minimum height. To solve this just put min-height: 50vh; to your .footer class. Of course you can change 50vh to whatever minimum height you want.