max-width not working on div.container-fluid - html

Question

[This image 1 is my desired outcome but my result is image 2]
How can you make your png to fit in the div.container-fluid like image 1?
HTML Code:
<!--Footer-->
<div class="container-fluid w-100 footer" id="footer">
<div class="container-fluid row">
<h5 class="col-5 mt-5" id="availableforcontact">
available for contact on
<br>
saturdays and sundays
<br>
EST GMT -05:00
</h5>
<h5 class="col-3 mt-5" id="contactfooter">
contact
<br>
<p id="location">Manila City, Philippines</p>
albaalecxavier#gmail.com
</h5>
<h5 class="col-3 mt-5" id="socialfooter">
social
<br>
dribble
<br>
linkedin
<br>
twitter
<br>
instagram
</h5>
</div>
**<img src="images/Vector 2.png" alt="" id="redwave" class="w-100"> <!--THIS IS THE PROBLEM-->**
</div>
CSS Code:
#redwave {
max-width: 100%;
max-height: 100%;
object-fit: none;
}

Answer 1

What is the CSS for the parent div of #redwave? Unless it has a declared width and height, there would be nothing for #redwave's 100% to calculate against. If you're wanting to use a percentage of the viewport, you can use vh instead of %, where a width of 1vh == 1% of the viewport's width. If you're wanting it to take up a percentage of the parent container then you'd need to give the parent container an absolute value for the percentages to be calculated.

Answer 2

These are the styling i wrote.
ul {
margin: 0 auto;
text-align: center;
}
ul li {
list-style: none;
display: inline-block;
padding: 4px 50px;
}
ul li a {
text-decoration: none;
text-transform: uppercase;
color: #000;
}
#media only screen and (max-width: 700px) {
ul li {
padding: 4px 20px;
}
}
This is the complete code
.wrapper{
margin: 0;
background-color: #fff;
}
header{
height: 120px;
padding: 4px;
}
header h1{
font-family: "Amatic Sc";
text-transform: uppercase;
font-size: 50px;
text-align: center;
color: #000;
}
.btn {
width: 10;
height: 2px;
padding: 1.375rem 2.625rem 1.375rem 2.625rem;
border: 0.125rem solid #B49DF1;
border-radius: 2rem;
background-color: #B49DF1;
color: #fff;
font: 700 0.75rem/0 'Open Sans', arial, sans-serif;
text-decoration: none;
transition: all 0.2s;
}
.btn:hover {
background-color: #9876F3;
border: 0.125rem solid #9876F3;
}
ul {
margin: 0 auto;
text-align: center;
}
ul li {
list-style: none;
display: inline-block;
padding: 4px 50px;
}
ul li a {
text-decoration: none;
text-transform: uppercase;
color: #000;
}
#media only screen and (max-width: 700px) {
ul li {
padding: 4px 20px;
}
}
<div class="wrapper">
<header>
<h1>Novaturient</h1> <!---- Next to this should be the button -->
</header>
<nav>
<ul>
<li class="one">Home</li>
<li class="two">Content</li>
<li class="three">Features</li>
<li class="four">About</li>
<li class="fice">Contact</li>
</ul>
</nav>
</div>