Mysterious space after navigation - html

Question

I made this navigation bar using flexbox, but I want the right side buttons to be on the extreme right.
Here's my code : https://codepen.io/mayankkamboj/pen/XKbdOY
HTML:
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400' rel='stylesheet' type='text/css'>
<nav>
<div class='container'>
<div class='nav-btn hoverback'>
<img src='https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg' />
</div>
<div class='nav-btn no-border'>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
<input type='text' placeholder='Where to ?' class='search'/>
</div>
</div>
<div class='container'>
<div class='nav-btn hoverback'>
<div class='btn b-a-host'>Become a Host</div>
</div>
<div class='nav-btn hoverback'>
Help
</div>
<div class='nav-btn hoverback'>
Sign Up
</div>
<div class='nav-btn hoverback'>
Log In
</div>
</div>
</nav>
CSS:
*{
box-sizing:border-box;
}
body{
padding:0;
margin:0;
}
nav{
border-bottom:1px solid #ddd;
font-family:'Roboto';
display:flex;
justify-content:space-between;
font-weight:300;
}
nav:after{
content:" ";
display:block;
clear:both;
height:0.01px;
}
.container{
display:flex;
}
.nav-btn{
height:4em;
padding:0em 1em;
border-right:1px solid grey;
display:flex;
min-width:100px;
justify-content:center;
align-items:center;
}
.no-border{
border-right:0px solid white;
}
img{
height:60%;
}
.fa{
color:#ccc;
}
nav .search{
height:4.5em;
width:20em;
font-family:'Roboto';
font-weight:400;
border-style:none;
text-indent:1em;
}
nav .search:focus{
outline-style:none;
}
nav .btn{
font-weight:400;
color:grey;
border:2px solid #aaa;
padding:0.5em 0.7em;
letter-spacing:0.01em;
}
.b-a-host{white-space:nowrap;}
.nav-btn.hoverback:hover{
cursor:pointer;
background-color:#f8f8f8;
}
#media (max-width:500px){
nav{
flex-direction:column;
}
}
It looks fine on mobile screens but causes a problem on higher resolutions. I want the buttons to be on the extreme sides with space in between them. How do I do it?

Answer 1

You don't need a clearfix here as you are dealing with flexboxes and not floating containers - so you can remove nav:after.
The issue is that the nav:after is a flex item and justify-content: space-around will consider that too - see demo below after removing the nav:after:
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
nav {
border-bottom: 1px solid #ddd;
font-family: 'Roboto';
display: flex;
justify-content: space-between;
font-weight: 300;
}
/*
nav:after {
content: " ";
display: block;
clear: both;
height: 0.01px;
}
*/
.container {
display: flex;
}
.nav-btn {
height: 4em;
padding: 0em 1em;
border-right: 1px solid grey;
display: flex;
min-width: 100px;
justify-content: center;
align-items: center;
}
.no-border {
border-right: 0px solid white;
}
img {
height: 60%;
}
.fa {
color: #ccc;
}
nav .search {
height: 4.5em;
width: 20em;
font-family: 'Roboto';
font-weight: 400;
border-style: none;
text-indent: 1em;
}
nav .search:focus {
outline-style: none;
}
nav .btn {
font-weight: 400;
color: grey;
border: 2px solid #aaa;
padding: 0.5em 0.7em;
letter-spacing: 0.01em;
}
.b-a-host {
white-space: nowrap;
}
.nav-btn.hoverback:hover {
cursor: pointer;
background-color: #f8f8f8;
}
#media (max-width:500px) {
nav {
flex-direction: column;
}
}
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400' rel='stylesheet' type='text/css'>
<nav>
<div class='container'>
<div class='nav-btn hoverback'>
<img src='https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg' />
</div>
<div class='nav-btn no-border'>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
<input type='text' placeholder='Where to ?' class='search' />
</div>
</div>
<div class='container'>
<div class='nav-btn hoverback'>
<div class='btn b-a-host'>Become a Host</div>
</div>
<div class='nav-btn hoverback'>
Help
</div>
<div class='nav-btn hoverback'>
Sign Up
</div>
<div class='nav-btn hoverback'>
Log In
</div>
</div>
</nav>

Answer 2

You can add a class to the another container and make it justify-content: flex-end and more over please add flex:1 to container so that both container can have same width and remove clearfix. i hope it is helpful to you
*{
box-sizing:border-box;
}
body{
padding:0;
margin:0;
}
nav{
border-bottom:1px solid #ddd;
font-family:'Roboto';
display:flex;
justify-content:space-between;
font-weight:300;
}
.container{
display:flex;
flex: 1;
}
.container.right {
justify-content: flex-end;
}
.nav-btn{
height:4em;
padding:0em 1em;
border-right:1px solid grey;
display:flex;
min-width:100px;
justify-content:center;
align-items:center;
}
.no-border{
border-right:0px solid white;
}
img{
height:60%;
}
.fa{
color:#ccc;
}
nav .search{
height:4.5em;
width:20em;
font-family:'Roboto';
font-weight:400;
border-style:none;
text-indent:1em;
}
nav .search:focus{
outline-style:none;
}
nav .btn{
font-weight:400;
color:grey;
border:2px solid #aaa;
padding:0.5em 0.7em;
letter-spacing:0.01em;
}
.b-a-host{white-space:nowrap;}
.nav-btn.hoverback:hover{
cursor:pointer;
background-color:#f8f8f8;
}
#media (max-width:500px){
nav{
flex-direction:column;
}
}
<nav>
<div class='container'>
<div class='nav-btn hoverback'>
<img src='https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg' />
</div>
<div class='nav-btn no-border'>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
<input type='text' placeholder='Where to ?' class='search'/>
</div>
</div>
<div class='container right'>
<div class='nav-btn hoverback'>
<div class='btn b-a-host'>Become a Host</div>
</div>
<div class='nav-btn hoverback'>
Help
</div>
<div class='nav-btn hoverback'>
Sign Up
</div>
<div class='nav-btn hoverback'>
Log In
</div>
</div>
</nav>