Can't move my div using float-right inside container - html

Question

I have a container where i store 2 div's. ".logo" and ".navbar-list" how can I move my ".navbar-list" to the right edge of container.
Previously everything worked but when I switched bootstrap to version 4.3.1 my div's overlapped .I've tried float:right but is not working.
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

There are lots of methods of achieving your desired result! In my opinion, Flexbox would be your best option. You should add display: flex to your .container. You can add the flex to the .logo container as well, if you want the logo and h1 to sit side by side.
You should also avoid using float, as this often makes HTML behave unexpectedly. You can replace this with justify-content: space-between.
I've amended your example above to incorporate my amends:
.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

From a high level, the go-to method for this situation is using flexbox instead of floats. Not sure about Bootstrap in your case or why you had that change happen.
.container {
display: flex;
justify-content: flex-end; /* and many more positioning options */
}

Answer 3

just add float: right; to your .navbar-list css then you can move your div to right side
.navbar-list {
color: white;
width: 300px;
height: 100%;
float: right;
}