<div class="content">
    <ul class="content-list">
      <li class="content-list__item"><a href="#">1</a></li>
      <li class="content-list__item"><a href="#">2</a></li>
      <li class="content-list__item"><a href="#">3</a></li>
      <li class="content-list__item"><a href="#">4</a></li>
      <li class="content-list__item"><a href="#">5</a></li>
      <li class="content-list__item"><a href="#">6</a></li>
      <li class="content-list__item"><a href="#">7</a></li>
      <li class="content-list__item"><a href="#">8</a></li>
      <li class="content-list__item"><a href="#">9</a></li>
      <li class="content-list__item"><a href="#">10</a></li>
      <li class="content-list__item"><a href="#">11</a></li>
      <li class="content-list__item"><a href="#">12</a></li>
      <li class="content-list__item"><a href="#">13</a></li>
      <li class="content-list__item"><a href="#">14</a></li>
      <li class="content-list__item"><a href="#">15</a></li>
      <li class="content-list__item"><a href="#">16</a></li>
      <li class="content-list__item"><a href="#">17</a></li>
      <li class="content-list__item"><a href="#">18</a></li>
      <li class="content-list__item"><a href="#">19</a></li>
      <li class="content-list__item"><a href="#">20</a></li>
      <li class="content-list__item"><a href="#">21</a></li>
      <li class="content-list__item"><a href="#">22</a></li>
      <li class="content-list__item"><a href="#">23</a></li>
    </ul>
  </div>

.content {
  width: 900px;
  margin: 0 auto;
  background-color: #eaeaea;
  padding: 20px;
}
.content-list {
  margin: 0;
  padding: 20px 10px 10px 20px;
  background-color: #aaaaaa;
  list-style: none;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}
.content-list__item {
  background-color: aquamarine;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin: 0 10px 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}