overriding django admin panel navbar

this is my base_site.html

{% extends "admin/base_site.html" %}
{% load i18n %}
{% load static from staticfiles %}

{% block extrahead %}
    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" />
{% endblock %}

{% block extrastyle %}
  {{ block.super }}

  {# Custom CSS for the admin panel #}
  <link href="{% static 'css/octopus-admin.css' %}" rel="stylesheet" type="text/css" />

  {% if LANGUAGE_BIDI %}
    <link href="{% static 'css/admin-rtl.css' %}" rel="stylesheet" type="text/css" />
  {% endif %}

  <style>
    .user-tools-container {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .user-tools {
      margin-left: 20px;
    }

    .language-form {
      display: inline-block;
      margin-left: 10px;
    }

    .language-select {
      padding: 2px 5px;
      font-size: 12px;
    }


  </style>
{% endblock %}

{% block userlinks %}
  <div class="user-tools-container">
    {{ block.super }}
    <form class="language-form" id="languageForm" method="post" action="{% url 'set_language' %}">
      {% csrf_token %}
      <select class="language-select" name="language" id="language" onchange="changeLanguage(this.value)">
          {% for lang_code, lang_name in LANGUAGES %}
              {% if lang_code == LANGUAGE_CODE %}
                  <option value="{{ lang_code }}" selected>{{ lang_name }}</option>
              {% else %}
                  <option value="{{ lang_code }}">{{ lang_name }}</option>
              {% endif %}
          {% endfor %}
      </select>
    </form>
  </div>

  <script>
    function changeLanguage(languageCode) {
      const form = document.getElementById('languageForm');
      form.elements.language.value = languageCode;
      form.submit();
    }
  </script>
{% endblock %}

the problem is it look like this:

as you see everything on the right side are so compact and i can’t put some space between them!
is there anyway to make it better in term of spacing?