Испытание: ещё одна CSS-таблица [18/18] - 94%, прошу помочь.

Здравствуйте! Помогите пожалуйста разобраться с испытанием.
Не могу поймать баланс между border-spacing и padding у article.
С отступами не кратными пяти удалось добиться результата в 94%, дальше никак не выходит, что я делаю не так?

article {
   width: 470px;
   display: table;
   text-align: center;
   border-spacing: 15px 7px;
   border: 5px solid #686868;
   background-image: url("img/wood.png");
   margin: 10px;
   padding: 8px 0 9px 0;
}

ul:first-child {
   display: table-header-group;
   background-image: url("img/wall-1.png");
}

ul:last-child {
   display: table-footer-group;
   background-image: url("img/wall-2.png");
}

li {
   display: table-cell;
   border: 10px solid #686868;
   padding: 20px 0px;
}

li:last-of-type {
  width: 150px;
}

li:first-of-type {
  width: 110px;
}

Отступы задавайте как margin для li.
Ширину ячеек прописывать не надо. Изменяйте внутренние отступы, если необходимо.

1 лайк

Превратил li в inline-block и достиг 100%:

article {
   width: 470px;
   display: table;
   text-align: center;
   border: 5px solid #686868;
   background-image: url("img/wood.png");
   margin: 10px;
   padding: 10px 0 0 0;
}

ul:first-child {
   display: table-header-group;
}

ul:first-child li {
   background-image: url("img/wall-1.png");
}

ul:last-child {
   display: table-footer-group;
}

ul:last-child li {
   background-image: url("img/wall-2.png");
   margin-bottom: 15px;
}

li {
   display: inline-block;
   border: 10px solid #686868;
   margin: 5px 10px 10px 5px;
   background-image: url("img/wall-2.png");
   padding: 20px;
}

li:last-of-type {
   padding: 20px 50px;
}

li:first-of-type {
   padding: 20px 30px;
   margin-left: 10px;
}