FLexbox Dropdown Menu is making Sub categories Stand in a Line Instead of Being Stacked [closed]

I have a problem with this website I been working on

I want the navigation dropdown to look organized with the subcategories that are under the main categories, stacked on top of each other, without affecting the navigation bar, but right now the subcategories are in a line/horizontal mode and they go off-screen in the dropdown menu.

Bad dropdown:

good dropdown:

I was tryna figure out the issue and I found out that when I comment out the "display flex" under ".navbar .main-menu ul" and padding under ".navbar ul li a" in CSS, the dropdown menu gets fixed, but the navigation bar gets messed up. How do I fix this?

The issue is here:

.navbar .main-menu ul {    display: flex;}.navbar ul li a {    padding: 32px 20px;    display: block;    font-weight: 600;    transition: 0.2s;}