Greetings (Baguette English speaker), I'm facing an issue where a certain element appears too large without any valid reason, and I'm seeking guidance on how to rectify it. Despite my attempts to adjust the width and padding, the problem persists. You can see in the top left corner that the block is excessively wide.
Below is the CSS for the Facebook logo, but the same anomaly occurs across all logos:
.reslogo {
position: fixed;
z-index: 200;
top: 0px;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
color:#fcecd9;
width: auto;
}
.facebook{
left: 0%;
top:-10%;
animation-name: logofb;
animation-duration: 0.5s;
animation-delay: 7.5s;
animation-fill-mode: forwards;
transition-property: top;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
@keyframes logofb {
from {top:-10%;}
to {top: 0%;}
}
.facebook:hover {
margin-top: 2%;
box-shadow: 10px 5px 5px black;
}I'm looking for a solution to ensure the box perfectly aligns with the logo size.