<div class="nav-demo flex-sbw-c flex-wrap g-1 border my-2 mx-auto">
<a class="brand-name my-auto mx-1" href="#"><h1>P8</h1></a>
<label>
<input
type="search"
id="search-box"
placeholder="Search for products"
/>
<i class="fas fa-search search-btn"></i>
</label>
<nav class="mx-1">
<ul class="nav-list flex">
<li class="mx-0 my-auto">
<a class="p-sm m-sm" href="#">
<div class="pos-relative">
<div>
<i class="fas fa-shopping-cart fa-2x"></i>
<div
class="notification-icon badge pos-abs flex-center"
>
2
</div>
</div>
</div>
</a>
</li>
<li class="ml-sm my-auto">
<a class="btn py-sm px-1 btn-link" href="#">Wishlist</a>
</li>
<li class="my-auto">
<a class="btn py-sm px-1 btn-secondary" href="#">Logout</a>
</li>
</ul>
</nav>
</div>