Issue displaying top navigation buttons and link in one column on smaller screens

Question

When top navigation bar screen gets smaller, in my case less than 950px, I am displaying hamburger bar and logo, clicking hamburger bar should reveal a vertical column of buttons with dropdown links on left side. Currently I am getting buttons displayed horizontally in navbar. Hopefully you can point me to right direction. Thank you.

What have I done so far: I was looking for more specific css rule which overrides .navbar.responsive a and .dropbtn display: block. Initially suspected .arrow-down element but taking it out did not make any difference. Tried to be more specific with css rule, but no luck.

HTML:

<template>
  <div class="outer-container">
    <div class="navbar">
      <div class="logo">
        <img src={whiteLogoUrl}>
      </div>
      <div class="navbar-center">
        <div class="dropdown">
          <button class="dropbtn">
            Item_1 <span class="arrow-down"></span>            
          </button> 
          <div class="dropdown-content">
            <div class="row">
              <div class="column">
                <a href="#">Link_1</a>
                <a href="#">Link_2</a>
              </div>
              <div class="column">
                <a href="#">Link_3</a>
                <a href="#">Link_4</a>
              </div>
            </div>
          </div> 
        </div>
        <div class="dropdown">
          <button class="dropbtn">
            Item_2 <span class="arrow-down"></span>            
          </button> 
          <div class="dropdown-content">
            <div class="row">
              <div class="column">
                <a href="#">Link_1</a>
                <a href="#">Link_2</a>
              </div>
              <div class="column">
                <a href="#">Link_3</a>
                <a href="#">Link_4</a>
              </div>
            </div>
          </div> 
        </div>
        <div class="dropdown">
          <button class="dropbtn">
            Item_3 <span class="arrow-down"></span>            
          </button> 
          <div class="dropdown-content">
            <div class="row">
              <div class="column">
                <a href="#">Link_1</a>
                <a href="#">Link_2</a>
              </div>
              <div class="column">
                <a href="#">Link_3</a>
                <a href="#">Link_4</a>
              </div>
            </div>
          </div> 
        </div>           
        <div class="dropdown">
          <button class="dropbtn">
            Item_4 <span class="arrow-down"></span>            
          </button> 
          <div class="dropdown-content">
            <div class="row">
              <div class="column">
                <a href="#">Link_1</a>
                <a href="#">Link_2</a>
              </div>
              <div class="column">
                <a href="#">Link_3</a>
                <a href="#">Link_4</a>
              </div>
            </div>
          </div> 
        </div> 
        <a href="#home">Item_5_Link</a>                          
      </div>      
      <a class="icon" onclick={handleHamburgerClicked}>
        <i class="icon-menu"></i>
      </a>
    </div>
  </div>
</template>

CSS:

/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
  height: 85px;
  display: flex; /* Added to enable flexbox */
  align-items: center; /* Added to center items vertically */
}

.navbar-center {
  display: flex;
  justify-content: center;
  flex-grow: 1;
}

/* Links inside the navbar */
.navbar a, .navbar .dropdown .dropbtn {
  font-size: 22px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  overflow: hidden;
}

/* Dropdown button */
.navbar .dropdown .dropbtn {
  font-size: 22px;
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .navbar .dropdown:hover .dropbtn {
  background-color: red;
}


/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */
.column {
  border-right: 1px solid #000; /* Change color as needed */
  padding-right: 10px; /* Add some space between the border and the content */
  float: left;
  width: 50%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}

/* Style links inside the columns */
.column a {
  font-size: 16px;
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

/* Add a background color on hover */
.column a:hover {
  background-color: #ddd;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Hide the link that should open and close the topnav on small screens */
.navbar .icon {
  display: none;
}

.logo {
  width: 150px;
  float: left;
  padding: 14px 16px;  
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #fff; /* Change color as needed */
  display: inline-block;
  margin-left: 0px;
  margin-bottom: 5px;
}

/* When the screen is less than 950 pixels wide, hide all links. Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 950px) {
    .navbar .logo { 
      width: 150px;
      float: left;
      padding: 14px 16px;
    }
    
    .navbar a, .navbar .dropdown .dropbtn {
      display: none;
    } 

    .navbar a.icon {
      float: right;
      display: block;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 950px) {
    .navbar.responsive .logo {display: none;}
    .navbar.responsive {position: relative;}
    .navbar.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    
    .navbar.responsive a, .navbar.responsive .dropdown .dropbtn {
      float: none;
      display: block;
      text-align: left;
    }
  }

JS:

import { LightningElement } from 'lwc';
import ICONS from '@salesforce/resourceUrl/Icons';
import { loadStyle } from 'lightning/platformResourceLoader';
import LOGOS from '@salesforce/resourceUrl/Logos';

export default class NavMenu extends LightningElement {

  whiteLogoUrl = LOGOS + '/LOGO_WHITE.svg';
  orangeLogoUrl = LOGOS + '/LOGO_ORANGE.svg';
  blackLogoUrl = LOGOS + '/LOGO_BLACK.svg';

renderedCallback() {

    loadStyle(this, ICONS + '/style.css');
}

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
handleHamburgerClicked() {
    
    const navbar = this.template.querySelector('.navbar');
    
    navbar.classList.toggle('responsive');
  }

}

What have I done so far: I was looking for more specific css rule which overrides .navbar.responsive a and .dropbtn display: block Initially suspected .arrow-down element but taking it out did not make any difference. Tried to be more specific with css rule, but no luck see below:

.navbar.responsive a,
.navbar.responsive .dropdown, 
.navbar.responsive .dropdown .dropbtn 
    { float: none; 
      display: block; 
      text-align: left; }