Could not change footer's backgroud color - html

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>
<li>Back to Top</li>
<li>Instagram</li>
<li>Facebook</li>
<li>Jcbms-sled-team#mail.fcboe.org</li>
<li>J.C. Booth Middle School</li>
<li>Fayette County Public Schools</li>
</ul>
</div>
</div>

Answer 1

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 2

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.

Answer 3

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