title: My logo image in my header isn't changing size when I define a smaller size in CSS
body: <p><a href="https://i.stack.imgur.com/knUmO.png" rel="nofollow noreferrer">Website Screenshot : </a>My logo image is by default 264x84px. It's going in a header that is 69px high, and the height has been defined as 50px, but the logo won't change size. It's bigger than the header</p>
  
  <p>I've tried setting max-height and messing around with that, and then just setting it even smaller to see if that helped, but it won't resize at all</p>
  
  <p>///html///</p>
  
  <pre><code>&lt;div class='heading'&gt;
          &lt;a class='logo' href="../index.html"&gt;&lt;img src="img-tea-cozy-logo.png"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>///html///</p>
  
  <p>///css///</p>
  
  <pre><code>.logo {
      height: 50px;
      float: left;
  }
  
  .heading {
      position: fixed;
      width: 100%;
      top: 0;
      border-bottom: 1px solid seashell;
      height: 69px;
  }
  </code></pre>
  
  <p>///css///</p>
  
  <p>I don't understand why the image is staying the same size</p>