html – The background color is not visible on the entire CSS page.

I can’t get the bottom two parts to match the rest of the page with solid color in the background and I’m not sure what’s wrong. I am a new developer so if anyone wants to help me with this page I would appreciate it too.

[the blue background shouldn’t be showing like the section above it.]
[1]: https://i.stack.imgur.com/usAvY.png

Here is the CSS code for these parts:
Contact.

.contact {
 background: #131313;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 height: 100%;
 padding: 10rem 0;
 border-style: solid;
   border-color: #D3D3D3;
   border-top: hidden;
   border-left: hidden;
   border-right: hidden;

}

.contact h1{
 background-color: #ff8177;
 background-image: linear-gradient(to right, #ff0844 0%, #f7673c 100%);
 background-size: 100%;
 -webkit-background-clip: text;
 -moz-background-clip: text;
 -webkit-text-fill-color: transparent;
 -moz-text-fill-color: transparent;
 margin-bottom: 5rem;
 font-size: 2.5rem;
}

.contact h1:after {
 content:' ';
     display:block;
     border:2px solid;
     color: #047a7c
 }

 .contact__wrapper {
   flex-direction: column;
 }

.media a, 
.media span{
color: #87CEFA;
text-decoration: none;

}


.media li  {
list-style: none;
margin: 10px 30px;
display: inline-block;
font-size: 20px;
padding: 20px 20px;
color:  #87CEFA;
border: 1px solid #87CEFA;
border-radius: 50%;
transition: .5s;
flex-direction: column;
justify-content: center;
align-items: center;

}
    
.media ul li a:hover, span:hover, li:hover {
color:  #FFC0CB;
transition: .5s;
}

Footer

    footer {
  background: #131313;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 10rem 0;
  border-style: solid;
    border-color: #D3D3D3;
    border-top: hidden;
    border-left: hidden;
    border-right: hidden;

}
.footer-content{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3{
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
font-family: Georgia, 'Times New Roman', Times, serif ;
height: 100%;
padding-bottom: 30px;
}
.footer-content p{
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
}

.footer-bottom{
background: #000;
width: 100vw;
padding: 5px 0;
text-align: center;
overflow: hidden
}
.footer-bottom p{
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
opacity: 50%;
}
.footer-bottom span{
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}```

Write a Comment