i am trying to my page responsive but when i inspect and look into mobile view they do align next to each on desktop that was fine but on mobile view it look like that

i wnat shopping carticon and button next to eachother so my navbar does not llok stretch her is my code

    <!-- navbar -->
<!-- Image and text -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #025;">
  <div class="container-fluid">
    <a class="navbar-brand text-white" href="{% url 'accounts:home' %}" style="font-size: 25px; font-weight:600;">
      <img src="{% static 'image/logo/logo.png' %}" class="d-inline-block align-text-center logo-img"
        style="margin-left: 150px; height: 40px;">
      BuyBuy
    </a>

    <div class="navbar-nav dekstop_search">
      <form class="form-inline" action="{% url 'products:search' %}">
        {% csrf_token %}
        <input class="search" type="search" placeholder="Search..." aria-label="Search" name="search" required>
        <button class="btn sea btn-outline-primary" type="submit" value="Search"><i class="fas fa-search text-white"></i></button>
      </form>
    </div>

<!-- Links -->
{% if user.is_authenticated %}

  <!-- Right -->
  <div class="navbar-nav">
    <a href="#" class="nav-link text-white text-center"><i class="fas fa-heart"></i>
      <span class="badge" style="background-color: white; color:#025; padding:3px;">{{wish|length}}</a>
      <a href="#" class="nav-link text-white text-center"><i class="fas fa-bell"></i>
        <span class="badge" style="background-color: white; color:#025; padding:3px;">{{wish|length}}</a>
      <a class="nav-link text-white" href="{% url 'orders:cart' %}"><i class="fas fa-shopping-cart"></i>
        <span class="badge" style="background-color: white; color:#025; padding:3px;">{{request.session.cart.keys|length}}</span></a>
      <div class="dropdown">
      <img class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="height:50px; border-radius: 50%; margin-right:150px;"
        src="{{ user.profile.profile_pic.url }}">
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <li class="item text-center" style="font-weight: bolder;"> Hi <strong
            style="color: #B9C04C; cursor:default;"> {{ user.username }}