max-width not working on div.container-fluid

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>
        <a href="" id="email">albaalecxavier@gmail.com</a>
      </h5>

      <h5 class="col-3 mt-5" id="socialfooter">
        social
        <br>
        <a href="" id="dribbblelink">dribble</a>
        <br>
        <a href="" id="linkedinlink">linkedin</a>
        <br>
        <a href="" id="twitterlink">twitter</a>
        <br>
        <a href="" id="instagramlink">instagram</a>
      </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

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"><a href="#home">Home</a></li>
                <li class="two"><a href="#content">Content</a></li>
                <li class="three"><a href="#features">Features</a></li>
                <li class="four"><a href="#about">About</a></li>
                <li class="fice"><a href="#contact">Contact</a></li>
                
            </ul>
        </nav>
    </div>

Answer 2

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.