Issue with selecting an image - css

Question

Sorry for the simplicity of this question. This doesnt work by any way, I dont know what else to do.
This image shouldnt be selected? I've tried lot of ways to select it but its not being selected.
I may be making a fool mistake.
HTML
<div class="social-media__banner">
<ul>
<li>
<a href="">
<img id="icon-test" src="images/github.svg" alt="github">
</a>
</li>
<li>
<a href="">
</a>
</li>
<li>
<a href="">
</a>
</li>
</ul>
</div>
CSS
.social-media__banner {
margin-top: 20px;
position: absolute;
top:500px;
left: 0;
width: 100%;
height: 200px;
ul{
left: 0rem;
width: 30px;
display: flex;
padding: 0;
li{
margin: 0 10px;
list-style: none;
font-size: 20px;
padding: 20px 20px;
color: white;
a{
position: relative;
display: block;
width: 50px;
height: 50px;
background-color: white;
color: black;
text-align: center;
border-radius: 50%;
overflow: hidden;
}
}
}
}
#icon-test{
height: 24px;
margin-top: 11px;
}
*I've checked on the inspector tool and it does not even select.
Thanks

Answer 1

If not for the cleanliness alone, why nest all of those selectors? Stick with the basics and you won't go wrong. You are saving yourself having to write .social-media__banner only a few times in your code.
.social-media__banner {
margin-top: 20px;
position: absolute;
top:500px;
left: 0;
width: 100%;
height: 200px;
}
.social-media__banner ul{
left: 0rem;
width: 30px;
display: flex;
padding: 0;
}
.social-media__banner li{
margin: 0 10px;
list-style: none;
font-size: 20px;
padding: 20px 20px;
color: white;
}
.social-media__banner a{
position: relative;
display: block;
width: 50px;
height: 50px;
background-color: white;
color: black;
text-align: center;
border-radius: 50%;
overflow: hidden;
}
#icon-test{
height: 24px;
margin-top: 11px;
}
<div class="social-media__banner">
<ul>
<li>
<a href="">
<img id="icon-test" src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="github">
</a>
</li>
<li>
<a href="">
</a>
</li>
<li>
<a href="">
</a>
</li>
</ul>
</div>