Push a div to the right - html

Question

I'm coding a menu in french but I need to move all the buttons (Home, About us...) to the right.
I tried with float: right; but it doesn't work.
Here is my Result :
My Result
The <a> Home, Informations, etc.. are in a div. It's this div that i want to push right !
My Objective :
My Objective
My Code:
/*
==============================
NAVBAR
==============================
*/
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #9ebd11/*55d6aa*/
;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
/*padding: 10px 0;*/
}
nav {
float: right;
}
nav #navbar-ul {
margin: 0;
padding: 0;
list-style: none;
}
nav .navbar-li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav .navbar-button {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav .navbar-button:hover {
color: #000;
}
nav .navbar-button::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav .navbar-button:hover::before {
width: 100%;
}
nav #register-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #register-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav #login-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #login-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
ul {
list-style-type: none;
}
nav,
.container {
display: flex;
}
.connection {
line-height: 2;
}
<header>
<div class="container">
<h1 class="logo">
<img src="images/Logo/logo_gp_.png" width="100" alt="Description de l'image">
</h1>
<nav>
<ul id="navbar-ul">
<li class="navbar-li">Home</li>
<li class="navbar-li">Informations</li>
<li class="navbar-li">About us</li>
</ul>
<ul class="connection">
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</nav>
</div>
</header>
Thanks

Answer 1

Float won't work because your container is a flex-container.
Just use:justify-content:space-between`
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #9ebd11/*55d6aa*/
;
}
nav #navbar-ul {
margin: 0;
padding: 0;
list-style: none;
}
nav .navbar-li {
display: inline-block;
padding-top: 23px;
position: relative;
}
nav .navbar-button {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav .navbar-button:hover {
color: #000;
}
nav .navbar-button::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav .navbar-button:hover::before {
width: 100%;
}
nav #register-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #register-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav #login-li {
position: relative;
}
nav #login-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
ul {
list-style-type: none;
}
nav,
.container {
display: flex;
justify-content: space-between;
}
.connection {
line-height: 2;
}
<header>
<div class="container">
<h1 class="logo">
<img src="images/Logo/logo_gp_.png" width="100" alt="Description de l'image">
</h1>
<nav>
<ul id="navbar-ul">
<li class="navbar-li">Home</li>
<li class="navbar-li">Informations</li>
<li class="navbar-li">About us</li>
</ul>
<ul class="connection">
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</nav>
</div>
</header>

Answer 2

Bootstrap's "Container" class has a max-width of something like 1800px(not certain of exact px count).
Try using "container-fluid". This should allow the nav items to move to the far right but will probably move your logo to the far left because of your .logo float-left css.
You can give the logo a margin-left that works for you.
Edit: I just noticed you've defined your own .container class in the css. And margin set to 0 auto. This is going to center your content within the container class and give you max width of 80% so your content won't reach the far right side of the browser unless you set this items to "position:absolute" and then give them the necessary margins.

Answer 3

Try changing your nav class from:
nav{
floaf: right;
}
to:
nav{
position: absolute;
right: 20px;
top: 0px;
}
This should force your nav element to position it's right 20px left of the parent elements right. Tested in chrome.

Answer 4

remove the float: right from your .nav and add float:left from .logo
Now add display:flex to your .logo and for your container add:
.container{
justify-content: space-between;
}
I have not tested this. Let me know if this is what you wanted.