Элементы перекрывают друг друга при изменении размера окна

Question

У меня есть раздел заголовка на веб-сайте, который состоит из:

• Логотип
• Вход в систему, кнопки регистрации
• Меню
• Выбор языка

И я хочу сделать их одной строкой, но проблема в том, что они перекрывают друг друга, когда я изменяю размер окна, в частности кнопка входа в систему перекрывает логотип, а средство выбора языка перекрывает основнойменю.

<div id="header-container" class="container">
  <div id="header-container-nav" class="row align-items-center">
    <div class="col-md-3">LOGO</div>
    <div class="col-md-1">LOGIN BUTTONS</div>
    <div class="col-md-5">MENU</div>
    <div class="col-md-1">LANGUAGE</div>
  </div>
</div>

Answer 1

Вместо использования здесь начальной загрузки я бы использовал flex

Я бы использовал это HTML

  <div id="header-container-nav">
    <div">LOGO</div>
    <div>LOGIN BUTTONS</div>
    <div>MENU</div>
    <div>LANGUAGE</div>
  </div>

и это CSS

#header-container-nav {
  display: flex;
}

А теперь вы можете настроить размер каждого элемента (ознакомьтесь с этой статьей http://javascriptkit.com/dhtmltutors/css-flexbox2.shtml)