title: First <a> element won't display below img in responsive nav
body: <p>I made a responsive nav that works perfectly except for one annoying little thing: When I resize the screen width to 1200px or below, the menu items are supposed to disappear and get replaced with a hamburger icon that displays all those disappeared items vertically when clicked. While most of the links do as expected, the first link (Home) plops itself next to the image instead of the next line.</p>
  <p>I plan on changing the 1200px to something more like 800px for phones, but made it 1200 to work on it without having to resize the screen so much while on comp.</p>
  <p>I tried making the image inside an  tag, but it messed with the padding and I don't want it to be clickable.</p>
  <p></p>
  <p>Is there a simple fix for this? Making the image have <code>display:block</code> didn't seem to fix it.</p>
  <p>My code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot;&gt;
  &lt;style&gt;
      @import url('https://fonts.googleapis.com/css?family=Montserrat:500');
      body {
          margin: 0;
          background-color: #393f4d;
          background-image: linear-gradient(90deg, #323d46 0%, #393f4d 3% 97%, #323d46 100%);
          font-family: Montserrat, sans-serif;
      }
  
      .topnav {
          overflow: hidden;
          background-color: #1d1e22;
          background-image: linear-gradient(105deg, #131417 0%, #1d1e22 5% 95%, #131417 100%);
          padding: 15px 0px;
      }
  
      .topnav a {
          float: left;
          display: inline-block;
          color: #feda6a;
          transition: all 0.3s ease 0s;
          text-align: center;
          padding: 15px 16px;
          text-decoration: none;
          font-size: 17px;
      }
  
      .topnav a:hover {
          color: #c82850;
      }
  
      .topnav a.active {
          color: #c85870;
      }
  
      .logo {
          float: left;
          display: block;
          padding: 0px 16px;
      }
  
      .topnav .icon {
          display: none;
      }
  
      @media screen and (max-width: 1200px) {
          .topnav a:not(:first-child) {display: none;}
          .topnav a.icon {
              float: right;
              display: block;
          }
  
      }
  
      @media screen and (max-width: 1200px) {
          .topnav.responsive {position: relative;}
          .topnav.responsive .icon {
              position: absolute;
              right: 0px;
              top: 15px;
          }
          .topnav.responsive a {
              float: none;
              display: block;
              text-align: left;
          }
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class=&quot;topnav&quot; id=&quot;myTopnav&quot;&gt;
          &lt;img class=&quot;logo&quot; src=&quot;https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQLQXYINuBRI13H7QE7ChnfwxQ50PY76Vs_KA&amp;usqp=CAU&quot; alt=&quot;Penguin&quot; style=&quot;width:48px; height:48px;&quot;&gt;
          &lt;a href=&quot;#home&quot; class=&quot;active&quot;&gt;Home&lt;/a&gt;
          &lt;a href=&quot;#news&quot;&gt;News&lt;/a&gt;
          &lt;a href=&quot;#contact&quot;&gt;Contact&lt;/a&gt;
          &lt;a href=&quot;#about&quot;&gt;About&lt;/a&gt;
          &lt;a href=&quot;javascript:void(0);&quot; class=&quot;icon&quot; onclick=&quot;myFunction()&quot;&gt;
              &lt;i class=&quot;fa fa-bars&quot;&gt;&lt;/i&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div style=&quot;padding-left:16px&quot;&gt;
          &lt;h2&gt;Responsive Topnav Example&lt;/h2&gt;
          &lt;p&gt;Resize the browser window to see how it works.&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
      function myFunction() {
          var x = document.getElementById(&quot;myTopnav&quot;);
          if (x.className === &quot;topnav&quot;) {
              x.className += &quot; responsive&quot;;
          } else {
              x.className = &quot;topnav&quot;;
          }
      }
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>