Minha resolução para o exercício Flexbox -Grid | Flexbox: posicione elementos na tela

Segue abaixo minha resolução do exercício usando como base a aula do professor para definir corretamente a margin dos elementos. Resolvi me desafiar um poquinho e posicionar a grade mais ao centro da pagina.

Visualização da Grid usando flexbox O código:

Fiz uma alteração no html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="exerciciostyle.css">
  <title>Começando o grid</title>
</head>

<body>
  <div class="center">
    <div class="grid">

      <div class="box">Ruby on Rails</div>
      <div class="box">Java</div>
      <div class="box">HTML</div>
      <div class="box">Python</div>
      <div class="box">Wordpress</div>
      <div class="box">Bootstrap</div>
      <div class="box">Java Web</div>
      <div class="box">MySQL</div>
    </div>
  </div>
</body>

</html>

No código css aproveitei para revisar alguns conceitos.

* {
  margin: 0;
}

body {
  background-color: lightgray;
  font-size: 18px;
}
.center {
  display: block;
  width: 700px;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
}
.grid {
  display: flex;
  flex-wrap: wrap;
}

.box {
  background-color: lightgreen;
  text-align: center;
  width: 50px;
  height: 50px;
  width: 23.5%;
  margin: 1%;
}
.box:nth-child(4n) {
  margin-right: 0;
}
.box:nth-child(4n + 1) {
  margin-left: 0;
}

O resultado:

Grid usando flexbox