Can't Move Icon Nav to Right Side of Div [duplicate] - html

Question

This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
I am trying to have a logo on the left of the div and the nav on the right side of the div, but I can't seem to get the nav to move to the right.
.full {
background-color: black;
color: white;
width: 300px;
height: 400px;
border-radius: 20px;
transition: 1s ease;
}
.autofill {
padding: 10px;
}
.topbar {
overflow: hidden;
width: 100%;
height: 50px;
background-color: #131218;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
display: flex;
align-items: center;
}
.body {
display: block;
width: 100%;
height: 330px;
background-color: blue;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
img {
height: 50px;
padding: 5px;
border-radius: 200px;
float: left;
will-change: transform;
animation: logofloat 1s ease-in-out infinite alternate;
}
#keyframes logofloat {
from {
transform: translateY(5px);
}
to {
transform: translateY(15px);
}
}
a {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
align-items: center;
float: left;
display: block;
margin-right: 10px;
background-color: #25242B;
text-align: center;
text-decoration: none;
border-radius: 5px;
}
i {
padding: 5px;
color: #4D4A58;
}
a:hover:not(.active) {
background-color: grey;
}
a:not(.active) {
color: white;
}
.active {
background-image: linear-gradient(to right, #5433FF, #20BDFF, #6FB1FC);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="full">
<div class="autofill" id="background">
<div class="topbar">
<img class="logo" src="/icons/glacier.png">
<div class="nav">
<i class="fa fa-fw fa-align-justify"></i>
<i class="fa fa-fw fa-wifi"></i>
<i class="fa fa-fw fa-user"></i>
<a class="active" href="#"><i class="fa fa-fw fa-gear"></i></a>
</div>
</div>
<div class="body"></div>
</div>
Here is my fiddle for the project: https://jsfiddle.net/70wzxsL5/
How can I fix the aligning of the logo and nav in the division?

Answer 1

Add this justify-content: space-between; on .topbar
.topbar {
overflow: hidden;
width: 100%;
height: 50px;
background-color: #131218;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
https://jsfiddle.net/lalji1051/fv1ju8cw/2/

Answer 2

Add justify-content: space-between; to .topbar:
.full {
background-color: black;
color: white;
width: 300px;
height: 400px;
border-radius: 20px;
transition: 1s ease;
}
.autofill {
padding: 10px;
}
.topbar {
overflow: hidden;
width: 100%;
height: 50px;
background-color: #131218;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
display: flex;
align-items: center;
justify-content: space-between; /* Here */
}
.body {
display: block;
width: 100%;
height: 330px;
background-color: blue;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
img {
height: 50px;
padding: 5px;
border-radius: 200px;
float: left;
will-change: transform;
animation: logofloat 1s ease-in-out infinite alternate;
}
#keyframes logofloat {
from {
transform: translateY(5px);
}
to {
transform: translateY(15px);
}
}
a {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
align-items: center;
float: left;
display: block;
margin-right: 10px;
background-color: #25242B;
text-align: center;
text-decoration: none;
border-radius: 5px;
}
i {
padding: 5px;
color: #4D4A58;
}
a:hover:not(.active) {
background-color: grey;
}
a:not(.active) {
color: white;
}
.active {
background-image: linear-gradient(to right, #5433FF, #20BDFF, #6FB1FC);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="full">
<div class="autofill" id="background">
<div class="topbar">
<img class="logo" src="/icons/glacier.png">
<div class="nav">
<i class="fa fa-fw fa-align-justify"></i>
<i class="fa fa-fw fa-wifi"></i>
<i class="fa fa-fw fa-user"></i>
<a class="active" href="#"><i class="fa fa-fw fa-gear"></i></a>
</div>
</div>
<div class="body"></div>
</div>