Search code examples
htmlcsswhitespacespacing

add a white space between divs

I am remaking the Google Chrome home page, but I'm stuck on the part at the bottom of the page with the spaces. I can't get them perfect. Two of the icons don't aline.

Here is what I need compared to what i get

enter image description here enter image description here

At the sides the spaces are too small and in the middle they are too big.
If I can somehow make the spaces in the middle smaller and on the sides bigger then I can reproduce the first image

I tried
justify-content: space-between;
and
justify-content: space-around;
and
justify-content: space-even; they don't work

Here is my html

<div class='mostUsedApps'>
    <div class='row'>
    <div class='youtube rowCell'></div>
    <div class='facebook rowCell'></div>
    <div class='roblox rowCell'></div>
    <div class='Agar rowCell'></div>
    <div class='gmail rowCell'></div>
</div>
</div>

here is the css

.youtube{
     background-image: url(youtube.png);
}
.facebook{
     background-image: url(facebook.png);
}

.roblox{
     background-image: url(roblox.png);
}

.Agar{
     background-image: url(Agar.png);
}

.gmail{
     background-image: url(gmail.png);
 }


.rowCell {
    width: 256px;
    height: 61px;
    display: inline-block;
    background-repeat: no-repeat;
}
.row {
    padding: 120px 0 0 424px;
    height: 112px;
    width: 525px;
    display: flex;
}

any idea how i can do this, thanks (:

Solution

  • To make perfect center alignment between inline divs, you can use text-align: center on display: inline-block divs.

    div.container {
  text-align: center;
}

div.icon {
  width: 30px;
  height: 30px;
  
  display: inline-block;
  margin: 10px;
  
  background-color: #eee;
  border-radius: 100%;
}
    <div class="container">
  <div class="icon youtube"></div>
  <div class="icon facebook"></div>
  <div class="icon gmail"></div>
  <div class="icon site4"></div>
  <div class="icon site5"></div>
  <div class="icon site4"></div>
</div>