First <a> element won't display below img in responsive nav

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.

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.

I tried making the image inside an tag, but it messed with the padding and I don't want it to be clickable.

Is there a simple fix for this? Making the image have display:block didn't seem to fix it.

My code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    @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;
        }
    }
</style>
</head>
<body>

    <div class="topnav" id="myTopnav">
        <img class="logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQLQXYINuBRI13H7QE7ChnfwxQ50PY76Vs_KA&usqp=CAU" alt="Penguin" style="width:48px; height:48px;">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <i class="fa fa-bars"></i>
        </a>
    </div>

    <div style="padding-left:16px">
        <h2>Responsive Topnav Example</h2>
        <p>Resize the browser window to see how it works.</p>
    </div>

    <script>
    function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";
        }
    }
    </script>

</body>
</html>

Solution

You have float: left set on your .logo image, even when your screen width is below 1200px. This is why display: block was not working. Simply set float: none in a media query:

@media screen and (max-width: 1200px) {
    .logo {
        float: none;
        display: block;
    }
}