SOURCE

  <div class="wrapper">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ul>
  </div>

*{margin:0;padding:0;}
ul,ol{list-style:none;}
.wrapper{
  width: 750px;
  margin: 20px auto;
  
}
ul > li {
  background: #ddd;
  margin-top: 10px;
  margin-bottom: 10px;
}

/*上面的代码不准动，请在下面写代码*/
.wrapper{background:yellow;overflow:hidden}
ul{
  background:yellowgreen;
  margin-right:-10px;

  display:flex;
  flex-wrap:wrap;
  
}
ul > li{ 
  width:calc(25% - 10px);
  margin-right:10px;
  box-sizing:border-box;
  border:1px solid red;
  
}