Image does not scale - html

Question

First, I want to state that I am not a web designer, but I am trying to search for solutions.
At the moment I am at loss, as I cannot figure out why a logo I am trying to add on a footer does not scale with resolution.
In fact, it is displaying it in full resulation only.
There is another logo in the footer that is scaling when resolution changes.
When I paste the code in TryIt, it is working, but once I put it on server, the image is in full resolution always.
Here is the TryIt link - https://www.w3schools.com/code/tryit.asp?filename=GRDOYEDNJX5K
As tyou can see, here the code would work.
What I have done is defined the image in footer.php
<div class="logo5">
<img src='https://i.ibb.co/42Lgdw7/8a2403c4b0d344d5ae7c3762c74fddb4-0001.jpg' class="logo5">
</div>
And added to CSS these lines
.logo5 {
width: 100%;
height: auto;
}
This is the rest of _footer.scss file
.footer-wrapp {
background-image: url("../../images/footer_back.jpg");
background-position: top;
background-size: cover;
background-repeat: no-repeat;
.container {
width: 100% !important;
max-width: unset !important;
}
.additional-info {
padding: 30px 0;
#media screen and (max-width: 992px) {
padding: 30px 0 15px;
}
h4 {
color: #fff;
}
p {
color: #7d7d7d;
}
}
#myFootNavWrapp {
margin: 60px 15% 0;
#media screen and (max-width: 1600px){
margin: 60px 5% 0;
}
#media screen and (max-width: 992px) {
margin: 0;
padding-left: 0;
padding-right: 0;
justify-content: space-between;
}
#media screen and (max-width: 520px) {
align-items: flex-start;
padding-top: 25px;
}
a {
color: #6377a4;
margin-right: 20px;
&:hover {
text-decoration: none;
border-bottom: 2px solid $main__red;
}
}
.mobile-logo-wrapp {
display: none;
margin-left: 20px;
#media screen and (max-width: 992px) {
display: inline-block;
}
a {
display: inline-block;
width: 45px;
height: 45px;
background-image: url("../../images/logo.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
#navFoot {
border-radius: 10px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
#media screen and (max-width: 992px) {
display: flex;
justify-content: center;
align-items: center;
}
.customFootNav {
flex-grow: 1;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
list-style-type: none;
flex-wrap: wrap;
width: 100%;
#media screen and (max-width: 520px) {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
li {
flex-grow: 1;
min-width: 5%;
a {
color: $main__dark_blue;
border-bottom: 2px solid transparent;
transition: all 0.2s linear;
font-weight: 600;
}
&:hover {
a {
text-decoration: none;
border-bottom: 2px solid $main__red;
}
}
}
}
.privacyFootNav {
flex-grow: 1;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
list-style-type: none;
flex-wrap: wrap;
width: 100%;
#media screen and (max-width: 520px) {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
#media screen and (min-width: 520px) and (max-width: 788px) {
margin-left: 92px;
}
li {
flex-grow: 1;
min-width: 5%;
a {
color: #6377a4;
border-bottom: 2px solid transparent;
transition: all 0.2s linear;
font-weight: 400;
}
&:hover {
a {
text-decoration: none;
border-bottom: 2px solid $main__red;
}
}
&.current-menu-item {
a {
text-decoration: none;
border-bottom: 2px solid $main__red;
}
}
}
}
.additional-wrapp {
flex-grow: 1;
}
.custom-menu-logo {
position: relative;
height: 95px;
min-width: 200px;
#media screen and (max-width: 1500px) {
min-width: 175px;
}
#media screen and (max-width: 1200px) {
min-width: 150px;
}
#media screen and (max-width: 992px) {
min-width: unset;
width:90px;
margin-right: 20px;
}
#media screen and (max-width: 520px){
display: none;
}
&:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
margin: 0 auto;
background-image: url("../../images/Logo_Red.jpeg");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transition: all 0.2s linear;
}
a{
outline: none;
display: block;
z-index: 9999;
position: absolute;
width: 100%;
height: 100%;
}
&:hover {
border: none;
a {
border: none;
}
}
}
}
}
}
Is there anything that would interfere with the logo I am trying to add to not scale?
Thank you.

Answer 1

I noticed that you're using wordpress, I already had problems while customizing themes and files this way, because wordpress theme sometimes overwrite your style and that's is bad.
To avoid it, I needed to put the css !important property, this way you force your style over any other that not have this property.
Maybe it's not the best appraoch, but worked for me, you should give a try.
.logo5 {
width: 100% !important;
height: auto !important;
}