Как избавится от лишнего расстояния?

Question

[zeni1agent]

У меня есть вот такой css код

.dog{
  min-height: 100vh;
  background-color: #f3f3f3;
  display: flex;
  flex-direction: column;
 
}

 
 .main__asside{
  background-color: skyblue;
  flex-basis: 50px;
}

.main{
  flex-basis: 50px;
  flex: 1 1 100%;
  display: flex;
}

.main .main__asside{
  background-color: yellow;
}

.main .main__content{
  background-color: lightgreen;
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
}

 .test1{
  background-color: orange;
  border: 1px solid white;
  width: 100px;
  height: 100px;
}

.header{
  flex-basis: 50px;
  background-color: red;
  width: 100%;
  height: 100px;
}


.footer{
  flex-basis: 50px;
  background-color: red;
  width: 100%;
}

<div class="dog"> 
<div class="header"></div>
<div class="main">
  <div class="main__asside"></div>
  <div class="main__content">
    <div class="test1"></div>
    <div class="test1"></div>
    <div class="test1"></div>
    <div class="test1"></div>
    <div class="test1"></div>
  </div>
</div>
<div class="footer"></div>
 </div>

И мне необходимо что бы блоки test1 переносились без отступов друг от друга

Вот пример на codepen
Все должно работать как обычно но без этих отступов.

Answer 1

[devilsD]

.main__content {
    align-content: flex-start;
}