Image too big when the window is minimized

https://www.codecademy.com/courses/make-a-website/projects/building-a-personal-portfolio

So I wanted to deviate from the tutorial a little bit. Instead just having my name, I created an image of my signature. It looks perfect when the window is maximized, but when the window is small, the signature is huge. How do I make it so it stays small and in line with the navbar?

Here’s my HTML code

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Personal Portfolio</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
    <link href="style.css" type="text/css" rel="stylesheet">
  </head>
  <body>
    <header class="container">
      <div class="row">
        <img class="col-sm-2"  src="https://i.ibb.co/mNJRrLx/Signature.png" alt="Signature" border="0">
        <nav class="col-sm-10 text-right">
          <a class="btn btn-primary" href="about.html">About Me</a>
          <a class="btn btn-primary" href="education.html">Education</a>
          <a class="btn btn-primary" href="experience.html">Experience</a>
        </nav>
      </div>
    </header>
    <section class="jumbotron">
      <div class="container">
        <div class="row">
          <h2>Programmer and Lifelong Learner</h2>
          <h3>HTML, CSS, JavaScript, PHP, C++, C#</h3>
        </div>
      </div>
    </section>
    <footer class="container">
      <div class="row">
        <p class="col-sm-4">&copy; 2019 Samuel Coleman</p>
        <div class="col-sm-2">
          <a href="https://github.com/ScourgeJumper">Github</a>
        </div>
        <div class="col-sm-2">
          <a href="www.linkedin.com/in/samuel-c-5b9aa6108">LinkedIn</a>
        </div>
        <div class="col-sm-2">
          <a href="https://www.facebook.com/samuel.coleman.9041">Facebook</a>
        </div>
        <div class="col-sm-2">
          <a href="https://medium.com/@walljumper59m">Medium</a>
        </div>
      </div>
    </footer>
  </body>
</html>

and here’s my css code

body {
  font-family: Roboto, sans-serif;
  
  background-color: AntiqueWhite;

}

header {
  padding: 0px 0;
}

header .row,
footer .row {
  display: flex;
  align-items: center;
}

h1 {
  font-weight: 50;
  margin: 0;
  color: black;
}

nav {
  display: flex;
  justify-content: flex-end;
}



.jumbotron {
  display: flex;
  align-items: center;
  background-image: url('https://images.unsplash.com/photo-1566568500004-fc65c6cbd230?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80');
  background-size: cover;
  color: #ffffff;
  height: 400px;
}

.jumbotron h2 {
  font-size: 60px;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

.jumbotron h3 {
  margin: 0 0 20px;
  color: #fff;
}

section .row img {
  margin: 0 0 30px;
  width: 100%;
}

.col-md-6 {
  margin: 0 0 30px;
}

.btn.btn-primary {
  border-radius: 0px;
  border: 0px;
  color: gray;
  background-color: transparent;
  
}

.btn.btn-primary:hover {
  color: black;
  background-color: white;
}

.btn-secondary {
  background-color: #2a70e0;
  color: #ffffff;
  margin: 0 0 30px;
}

.portrait {
  width:  350px;
  height: 300px;
}

figure img {
  width: 100%;
  height: auto;
}

figure {
  margin-bottom: 30px;
}

footer {
  font-size: 12px;
  padding: 20px 0;
}

footer .col-sm-8 {
  display: flex;
  justify-content: flex-end;
}

footer ul {
  list-style: none;
}


Hi tagpro81769,
in your html document at this line <img class="col-sm-2" src="https://i.ibb.co/mNJRrLx/Signature.png" alt="Signature" border="0"> remove class="col-sm-2" and add width="150".
For more info about how to create navigation with bootstrap click these two links: https://getbootstrap.com/docs/4.3/components/navbar/, https://startbootstrap.com/snippets/navbar-logo/.

Have a good day!