Problem with footer

[Edrol97]

How do I get rid of this gap in my footer? This is the code.

<footer class="Bad_Timesfooter">
  <footer style="background-color: black;">
  <a href="Home.html"><div class="title_text3">&#169 Eliot Lord 2024</div></a>
  <br>
  <button onclick="topFunction()" id="myBtn" title="Go to top">Back to the Top</button>
  <div class="column"><a href="Home.html"><p>Phone Home</p></a></div>
  <div class="column"><a href="about_me.html"><p>About Me</p></div></a>
  <div class="column"><a href="Art.html"><p>The Main Event</p></a></div>
  <div class="column"><a href="mailto:[email protected]"><p>Hit Me Up</p></a></div>
  <div class="column"><a href="The_Pun.html"><p>The Pun</p></a></div>
  <div class="column"><a href="https://procartoonists.org/profile/eliotlord/" target="_blank"><p>Trust Me, I'm a Professional</p></a></div>
  <div class="column"><a href="Mail.html"><p>The Fail</p></a></div>
  <div class="column"><a href="cv.html"><p>The Professional Bit</p></a></div>
  <div class="column2"><a href="Home.html"><img src="img/background/Bad%20Times%20logo%20horizontal%20white%20colour.png" width="500px"></a></div>  
  <div style="background-color: black;">
    <a href="https://www.facebook.com/house.of.lord.illustration1/" target="_blank"><img src="img/background/Facebook Logo.png" class="fa fa-facebook"></a>
    <a href="https://twitter.com/eliotlord1" target="_blank"><img src="img/background/Twitter%20Logo.png" class="fa fa-twitter"></a>
    <a href="https://www.instagram.com/house_of_lord_illustration/?hl=en" target="blank"><img src="img/background/Instagram logo.png" class="fa fa-instagram"></a>
  </div>
</footer>

 

[Johna]

The gap is most likely caused by the overflowing image. Either give the "Bad Times" image absolute positioning, or if you still want that spacing, but just to be black, then give the footer element a black background colour.
Are there intentionally 2 footer elements? One of them has no closing tag.

 

[Edrol97]

The gap is most likely caused by the overflowing image. Either give the "Bad Times" image absolute positioning, or if you still want that spacing, but just to be black, then give the footer element a black background colour.
Are there intentionally 2 footer elements? One of them has no closing tag.

How do I style that specific image with absolute positioning in the css file though?

 

[Johna]

How do I style that specific image with absolute positioning in the css file though?

.column2 {
  position: absolute;
}

That might not actually be the best way to go about it, now that I'm thinking about it, because the image will probably be somewhere at the top of the footer.
A better approach might be to use overflow: visible; on the footer. I can't be 100% sure though. Could you show your CSS for the footer?

 

[Edrol97]

.column2 {
  position: absolute;
}

That might not actually be the best way to go about it, now that I'm thinking about it, because the image will probably be somewhere at the top of the footer.
A better approach might be to use overflow: visible; on the footer. I can't be 100% sure though. Could you show your CSS for the footer?

footer{
    background-color: black;
    font-family: 'Times New Roman', Times, serif;
    width: screen;
}
footer a:hover{
    -webkit-text-fill-color: white;
    font-family: 'Times New Roman', Times, serif;
}
footer a{
    -webkit-text-fill-color: white;
    font-family: 'Times New Roman', Times, serif;
}

.fa {
    padding: 20px;
    font-size: 30px;
    width: 80px;
    height: 80px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    padding-bottom: 20px;
    bottom: 150px;
  }
  
  .fa:hover {
    opacity: 0.7;
  }
  
  .fa-facebook {
    background: #2e73b7;
    color: white;
    height: 80px;
    width: 80px;
  }
  
  .fa-twitter {
    background: #429bd6;
    color: white;
    height: 80px;
    width: 80px;
  }
  .fa-instagram {
    color: white;
    height: 80px;
    width: 80px;
  }

 

[Johna]

This can't be all the CSS for the footer. What about the .column elements? and the image?
Did you try overflow: visible;?

 

[Edrol97]

This can't be all the CSS for the footer. What about the .column elements? and the image?
Did you try overflow: visible;?

From the specific page css here

@font-face {
    font-family: Times;
    src: url(Fonts/TIMES%20CY.TTF);
}

header{
    fill: black;
}

body::-webkit-scrollbar {
    width: 1em;
  }
  
body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px black;
  }
  
body::-webkit-scrollbar-thumb {
    background-color: black;
    outline: 1px solid black;}

footer{
    background-color: black;
    font-family: 'Times New Roman', Times, serif;
    width: 100%;
    overflow: visible;
}

footer a:hover{
    -webkit-text-fill-color: white;
    font-family: 'Times New Roman', Times, serif;
}

footer a{
    -webkit-text-fill-color: white;
    font-family: 'Times New Roman', Times, serif;
}

.title_text3{
    font-family: 'Times New Roman', Times, serif;
    -webkit-text-fill-color: white}

#column2{
    align-items: center;
}

.fa {
    padding: 20px;
    font-size: 30px;
    width: 80px;
    height: 80px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    padding-bottom: 20px;
    bottom: 150px;
  }
 

  .fa:hover {
    opacity: 0.7;
  }
 
  .fa-facebook {
    background: #2e73b7;
    color: white;
    height: 80px;
    width: 80px;
  }
 
  .fa-twitter {
    background: #429bd6;
    color: white;
    height: 80px;
    width: 80px;
  }

  .fa-instagram {
    color: white;
    height: 80px;
    width: 80px;
  }

  #roche{
    float: right;
    bottom: 200px;
    background-color: black;
    width: 100%;
  }

From the general CSS on the specific icons we have this

.fa {
    padding: 20px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    padding-bottom: 20px;
    bottom: 150px;
  }
  
  .fa:hover {
    opacity: 0.7;
  }
  
  .fa-facebook {
    background: #2e73b7;
    color: white;
  }
  
  .fa-twitter {
    background: #429bd6;
    color: white;
  }
  .fa-instagram {
    background: #ffffff;
  }
  #roche{
    float: right;
    bottom: 100px;
  }

 

[tomliv]

Looks like something has a margin that is causing the gap. Does the 'bad times' image or it's container have a margin bottom? Do the social links or their container have a margin top?