Не могу переместить мой div, используя float-right внутри контейнера

Question

У меня есть контейнер, в котором я храню 2 div. ".logo" и ".navbar-list", как я могу переместить мой ".navbar-list" к правому краю контейнера.

Раньше все работало, но когда я переключил загрузчик на версию 4.3.1, мой div перекрылся. Я пробовал float: правильно, но не работает.

container {
  font-family: sans-serif;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  float: none;
  padding: 0;
}

.logo {
  width: 380px;
  margin-right: 0;
  position: absolute;
  height: 100%;
  margin-left: 10px;
}

.navbar-list {
  color: white;
  width: 300px;
  height: 100%;
}

<div class="container">
  <div class="logo">
    <a class="navbar-brand" href="#"><img src="img/640px-HSV-Logo.png" /></a>
    <h1>WITAJ W <span>DOMU!</span></h1>
  </div>
  <div class="navbar-list ">
    <ul>
      <li>
        <span class="	glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Sklep
      </li>
    </ul>
    <ul>
      <li> <button type="button" class="btn btn-danger btn-md ">
                                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Zaloguj się
                                </button></li>
    </ul>
  </div>
</div>

Answer 1

Существует множество способов достижения желаемого результата! На мой взгляд, Flexbox будет вашим лучшим вариантом. Вы должны добавить display: flex к вашему .container. Вы также можете добавить flex в контейнер .logo, если хотите, чтобы логотип и h1 располагались рядом.

Вам также следует избегать использования float, так как это часто приводит к непредсказуемому поведению HTML. Вы можете заменить это на justify-content: space-between.

Я изменил ваш пример выше, чтобы включить мои поправки:

.container {
  font-family: sans-serif;
  padding: 0;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: 380px;
  /*margin-right: 0; */
  /*position: absolute; */
  height: 100%;
  margin-left: 10px;
  display: flex;
  align-items: center;
}

.navbar-list {
  color: white;
  width: 300px;
  height: 100%;
}

<div class="container">
  <div class="logo">
    <a class="navbar-brand" href="#"><img src="img/640px-HSV-Logo.png" /></a>
    <h1>WITAJ W <span>DOMU!</span></h1>
  </div>
  <div class="navbar-list ">
    <ul>
      <li>
        <span class="	glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Sklep
      </li>
    </ul>
    <ul>
      <li> <button type="button" class="btn btn-danger btn-md ">
                                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Zaloguj się
                                </button></li>
    </ul>
  </div>
</div>

Answer 2

просто добавьте float: right; к вашему .navbar-list CSS, тогда вы можете переместить ваш div в правую сторону

 .navbar-list {
   color: white;
   width: 300px;
   height: 100%;
   float: right;
}

Answer 3

С высокого уровня, метод перехода в этой ситуации использует flexbox вместо float.Не уверен насчет Bootstrap в вашем случае или почему у вас произошли такие изменения.

.container {
    display: flex;
    justify-content: flex-end; /* and many more positioning options */
}