Seeking advice on why my social icons are behaving strangely. This is a new issue for me and I suspect that some other CSS is causing the problem, but I can't seem to locate it.
I want to ensure that the formatting of these images remains consistent when they are links.
I'm sure there is a simple solution that I am overlooking, and I appreciate your help in addressing this.
<div id = "socialcontainer">
<A HREF = ""><IMG class = "socials" SRC = "icons/FB.png"></IMG></A>
><IMG class = "socials" SRC = "icons/insta.png">
<IMG class = "socials" SRC = "icons/SC.png">
<IMG class = "socials" SRC = "icons/YT.png">
<IMG class = "socials" SRC = "icons/BIT.png">
</div><!--socialcontainer -->
#socialcontainer{
width:270px;
padding-top:35%;
left:80%;
//position:sticky;
//text-align:center;
//border-style: solid;
//border-color: red;
z-index: 1;
display:block;
margin:auto;
}
.socials{
width:50px;
float:left;
display:inline;
text-align:center;
border-style: solid;
border-color: red;
}
A:not(img){
color: inherit; /* blue colors for links too */
text-decoration: inherit; /* no underline */
}
/*a img{
width:inherit;
margin:inherit;
padding:inherit;
display:inherit;
}*/
a:not(img):hover {
color: #7d0505;
}