how to move a object on left if screen size decreases?

Question

I have a menu with links and when I decrease the screen resolution, the last buttons shrink, and I need to move all the objects to the left when reducing the screen size

Damn, you need to write something in order for the code to be added so I'll sing some song

[Куплет 1, Ольга Бузова]: Easy, simple. And now it doesn't seem So endless here without you. Nights together. But I don't really care Whatever what you wanna do.

[Переход]: In my Universe, you were the one, The only one that I’ve ever been around. But it turned out that you’re not irreplaceable' And now I'm opening a whole new world

Читать на сайте: https://www.gl5.ru/b/buzova_olga/olga-buzova-not-enough-for-me.html

  <div class="navbar navbar-inverse " id="headwrap" >
    <div class="navbar-header">
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>


      </button>
        <a href="/"> <img src="{% static 'MainPage/image/logo.png' %}" >  </a>


    </div>

    <div class="navbar-collapse collapse ">

    <ul class="nav navbar-nav">

       <li class="li"><a href="/news/">Главная</a></li>
      <li class="li"><a href="/programms/">Программы</a></li>
      <li class="li"><a href="/aboutUs">О нас</a></li>

    <div class="dropdown">
    <li class="li dropbtn "><a id="lessons" href="/news/">Уроки</a></li>
    <div class="dropdown-content">
    <a href="/lessons_django/">Django</a>
    <a href="/lessons_java/">Java</a>
    </div>
    </div>

    {% if user.is_authenticated %}
    <li class="li"><a href="/cabinet/">Профиль</a></li>

    {% endif %}

    </ul>


    <ul class="nav navbar-nav" id="reg">


         {% if user.is_authenticated %}

        <li>   <a href="/logout/"> <img src="{% static 'MainPage/image/Выход.png' %}" >  </a>      </li>

          {% else %}

          <li>  <a href="/login/"> <img src="{% static 'MainPage/image/Войти.png' %}" >  </a></li>
           <li><a href="/register/"> <img src="{% static 'MainPage/image/Регистр.png' %}" >  </a></li>

          {% endif %}




    </ul>
    </ul>

    </div>

Answer 1

Here is a sample Media query for your css.

@media only screen and (max-width : 1200px) 
{
     .download-button a
      {
         margin-right: 10px;
      }
}

You can define min and max-width and put specific CSS in.

There is a certain fix width for a different resolution, eg. mobile, tablet, monitor.

While developing go from small top big Screen resolution.