When reducing the screen size, menu items become vertically aligned. I want it to remain horizontally aligned. Justify content doesn't work
Image of the issue can be seen here.
Here is a link to the problem : https://bclinico.helvatica.com/faq/
<div id="sticky-header-navbar" style="display: flex; align-items: center; height: 80px; margin: auto; justify-content: space-between;">
<div class="container ulockd-pdng0" >
<nav class="nav" role="navigation" style="z-index: 999; position: relative; margin: 0; padding: 0;">
<span style="float: left; font-weight: 600; margin: 0; padding: 0;">
hekim_nav()
</span>
<ul class="ulockd-quote-btn hidden-xs hidden-sm">
<li><a href="#" class="btn btn-lg ulockd-btn-white"> Get a Quote </a></li>
</ul>
<ul>
<li class="shop-dropdown dropdown inner_page">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: white!important;" >
<i class="fa fa-shopping-bag"></i>
<span class="badge">
global $woocommerce;
echo $woocommerce->cart->cart_contents_count;
</span>
</a>
<ul class="dropdown-menu pull-right cart-list dropdown-menu-right" style="color: white!important;">
<li>
storefront_header_cart();
</li>
</ul>
<li><div class="ddd search_innerpage fa fa-search " style="margin-top: 5px; color: white!important;"\>
</li>
</li>
</ul>
</nav>
</div>
</div>
<!-- /nav -->
