I'm currently facing an issue with adjusting the height of "footer a" links that are using Fontface vector icons in the footer. I have added a red border around them to visually identify the problem. Ideally, when navigating through the links, the border should strictly wrap around the icons only.
Although I enclosed "footer a" within its own div ("#footer-links"), it seems that "footer a" is ignoring this container, causing the height to extend beyond both #footer-links and the footer itself.
I've attempted to modify various attributes of "footer a" without success. Any recommendations on how to resolve this?
Below you can find the HTML and CSS code snippets:
/* Custom CSS for all pages */
html {
font-size: 16px;
margin-left: 1rem;
margin-right: 1rem;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
html,
body {
height: 100%;
}
h2 {
font-size: 34px;
}
h3 {
font-size: 26px;
}
/*HEADER/NAVBAR*/
img {
height: 45px;
width: 300px;
}
header {
padding-top: 0.5rem;
display: inline-flexbox;
border-bottom: black solid 2px;
}
h1 {
margin: 0;
display: inline;
float: left;
}
nav ul {
list-style: none;
...
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<header>
<h1><img src="logo.png" alt="logo"></h1>
<nav>
<ul>
<li><a class="border" href="index.html">Home</a></li>
<li id="games-li"><a class="border" href="#">Games</a>
<ul id="games-ul">
<li><a href="games/anagram-hunt.html">Anagram Hunt </a></li>
<li><a href="games/math-facts.html">Math Facts Practice</a></li>
</ul>
</li>
<li><a class="border" href="about.html">About</a></li...
...;