Как сделать адаптивные круги и растянуть по ширине бокса?
HTML:<div class="wrapper">
  <div class="circle">
      <i></i>
  </div>
  <div class="circle">
      <i></i>
  </div>
  <div class="circle">
      <i></i>
  </div>
</div>
CSS:body, html {
  width: 100%;
  height: 100%;
}

.wrapper {
  width: 100%;
  text-align: justify;
  background-color: #000;
  
  &:after {
    content: "";
    display: inline-block;
    width: 100%;
  }
  
  .circle {
    display: inline-block;
    vertical-align: top;
    width: 23%;
    height: 100%;
    
    i {
      display: block;
      background-color: yellow;
      width: 100%;
      padding-bottom: 100%;
      border-radius: 50%;
    }
  }
}Пример
HTML:<div class="wrapper">
  <div class="circle">
      <i></i>
  </div>
  <div class="circle">
      <i></i>
  </div>
  <div class="circle">
      <i></i>
  </div>
</div>
CSS:body, html {
  width: 100%;
  height: 100%;
}

.wrapper {
  width: 100%;
  text-align: justify;
  background-color: #000;
  
  &:after {
    content: "";
    display: inline-block;
    width: 100%;
  }
  
  .circle {
    display: inline-block;
    vertical-align: top;
    width: 23%;
    height: 100%;
    
    i {
      display: block;
      background-color: yellow;
      width: 100%;
      padding-bottom: 100%;
      border-radius: 50%;
    }
  }
}Пример