title: How can I make this logo responsive? CSS isn't working on the logo
body: <p>I've tried a few different ways of writing the CSS and this is the closest I get, but I can't get the logo to shrink down to a reasonable size compared to the rest of the jumbotron. If you shrink the screen down to the size of a phone or so, the logo looks huge. I resized the photo so it should stay at most 150px. What am I doing wrong?</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta description=&quot;&quot;&gt;
      &lt;meta keywords=&quot;&quot;&gt;
      &lt;title&gt;Jan Clark Studio&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;bootstrap.min.css&quot;&gt;
      &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Courgette&amp;family=EB+Garamond:ital@0;1&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt; 
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;stylesheet.css&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;center&gt;
              &lt;div class=&quot;jumbotron jumbotron-fluid&quot; style=&quot;background-color:#487C84&quot;&gt;
              &lt;div class=&quot;title&quot;&gt;
              &lt;div class=&quot;d-inline-flex&quot;&gt;
                  &lt;img src=&quot;Photos/Three%20Trees%20001.png&quot; class=&quot;img-fluid&quot;&gt;
                  &lt;h1&gt;Jan Clark Studio&lt;/h1&gt;
              &lt;/div&gt;
              &lt;/div&gt;
                  &lt;ul class=&quot;nav justify-content-center&quot;&gt;
                    &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;a class=&quot;nav-link active&quot; href=&quot;index.html&quot;&gt;Home&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;indexphoto&quot;&gt;
                  &lt;img src=&quot;Photos/American%20Kestral%20-%20Looking%20For%20A%20Piece%20Of%20The%20Action%20%20--Watercolor%20by%20Jan%20Clark%20-%20use.JPG&quot; class=&quot;img-fluid&quot; max-width=&quot;100%&quot; max-height=&quot;auto&quot;&gt;
                  &lt;h3&gt;&lt;p&gt;American Kestral - Looking for a Piece of the Action&lt;/p&gt;&lt;/h3&gt;
                  &lt;h5&gt;&lt;p&gt;&lt;i&gt;Watercolor&lt;/i&gt;&lt;/p&gt;&lt;/h5&gt;
              &lt;/div&gt;
          &lt;/center&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <hr />
  <pre><code>div.title img {
  width: 100%;
  max-width: 150px;
  height: auto;
  float: left;
  margin-right: 1.5rem;
  }
  </code></pre>