Issue Inlining circular shaped div's for my nav bar - html

Question

hi will be available in the shape of circle. I got the code for responsive circle with text but the problem is this hat i am not able to inline two circles in one line . I tried float:left; as well as display:inline-block; but both doesn't work for me. Display:inline-block; inline the circles but the text inside it overlaps.
THIS is my HTML:
/*------NAV--BAR--*/
* .fa-navicon{padding:8px; font-size:7vw ;}
.nav-bar{position:absolute;z-index:5;width:100%; height:100%; background:grey; padding:10px;}
.nav-bar input{ border:; outline:none; margin-left:10px;
width:70%;
}
.nav-bar input::placeholder{color:grey; margin-left:10px;}
/*--copied-code---*/
.circle {
position: relative;
display: block;
margin: 2em 0;
background-color: transparent;
color: #222;
text-align: center;
}
.circle:after {
display: block;
padding-bottom: 30%;
width: 30%;
height: 0;
border-radius: 50%;
background-color: #ddd;
content: "";
}
.circle__inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 30%;
height: %;
}
.circle__wrapper {
display: table;
width: 100%;
height: 100%;
}
.circle__content {
display: table-cell;
padding: 1em;
vertical-align: middle;
}
#media (min-width: 480px) {
.circle__content {
font-size: 2em;
}
}
#media (min-width: 768px) {
.circle__content {
font-size: 4em;
}
}
}
<div class="nav-bar">
<input type="search" placeholder="Search...">
<i class="fa fa-close " style="font-size:7vw;color:#393e41; padding:3px; vertical-align:top; "></i>
<div class="option-wrapper">
<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">Global</div>
</div>
</div>
</div>
<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">Friends</div>
</div>
</div>
</div>
<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">Classroom</div>
</div>
</div>
</div>
<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">Games</div>
</div>
</div>
</div>
</div>
</div>
I want two or three circles on every line depending upon the user screen size.
Sorry if i did something wrong. This is my first quest. in stackoverflow.Thnks in advance.

Answer 1

Check this, adjust the browser size to view the responsiveness. You can also change the circle dimensions and font size depending upon your media-size.
If you need the full site to be responsive, I suggest to implement it with the popular CSS framework "Bootstrap", its pretty easy - Bootstrap-Grid-HowItworks
.fa-navicon{padding:8px; font-size:7vw ;}
.nav-bar{position:absolute;z-index:5;width:100%; height:100%; background:grey; padding:10px;}
.nav-bar input{ border:; outline:none; margin-left:10px;
width:70%;
}
.nav-bar input::placeholder{color:grey; margin-left:10px;}
.circle-wrapper {
float: left;
margin: 10px;
}
.circle {
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: #f2f2f2;
border-spacing: 10px;
}
#media (min-width: 480px) {
.circle{
height: 150px;
width: 150px;
font-size: 30px;
}
}
#media (min-width: 768px) {
.circle {
height: 150px;
width: 150px;
font-size: 30px;
}
}
<div class="nav-bar">
<input type="search" placeholder="Search...">
<i class="fa fa-close " style="font-size:7vw;color:#393e41; padding:3px; vertical-align:top; "></i>
<div class="option-wrapper">
<div class="circle-wrapper">
<div class="circle">Global</div>
</div>
<div class="circle-wrapper">
<div class="circle">Friends</div>
</div>
<div class="circle-wrapper">
<div class="circle">Classroom</div>
</div>
<div class="circle-wrapper">
<div class="circle">Games</div>
</div>
<div class="circle-wrapper">
<div class="circle">School</div>
</div>
<div class="circle-wrapper">
<div class="circle">College</div>
</div>
</div>
</div>