I'm having trouble aligning my li items in a Bootstrap dropdown next to each other. I've tried everything but nothing seems to work. Here's my code:
<nav class="navbar navbar-expand-lg
navbar-light bg-light">
<ul class="navbar-nav m-auto se">
{% for category in category_list %}
<li class="nav-item dropdown second">
<a class="nav-link dropdown-toggle secon text-dark" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<strong>{{ category.name }}</strong>
</a>
<ul class="dropdown-menu cat-drop" aria-labelledby="navbarDarkDropdownMenuLink">
{% for subcategory in category.our_categories.all %}
<li><a class="dropdown-item cat-item text-white text-center" href="{% url 'products:product' subcategory.id %}">{{ subcategory.name }}</a>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</nav>
CSS code for the above:
.second{
display: flex !important;
flex-direction: row;
}
.secon{
font-size: 12px;
margin: 2px !important;
}