Селекторы. Погружение Испытание: первая раскладка


Здравствуйте, не пойму в чем проблемка
Вот такой CSS у меня:

Вроде сверху результат идентичный, но при сравнении, он как будь то бы не засчитывает несколько селекторов. т.е. результат отличается почему-то.
Может, кто сталкивался с такой же проблемой и знает, что делать?

Такая же проблема, все идеально, но низ будто чем то отличается. Вот код:
html,
body {
margin: 0;
padding: 0;
font-family: “Arial”, sans-serif;
}

body {
min-width: 550px;
min-height: 250px;
padding: 10px;
}

.cards {
width: 500px;
}

.cards li::before {
font-family: “Courier”, monospace;
}

li:not(:nth-of-type(1)){
margin-left: -15px;
}

li:not(:nth-of-type(4)) {
width: 36px;
height: 54px;
}

ul li:nth-of-type(4){
margin-right: 30px;
margin-left: 15px;
}

ul:nth-of-type(1) li:nth-of-type(9),
ul:nth-of-type(2) li:nth-of-type(3), ul:nth-of-type(2) li:nth-of-type(5), ul:nth-of-type(3) li:first-of-type, ul:nth-of-type(3) li:nth-last-of-type(3) {
background-color: #0099ff;
}

ul:nth-of-type(1) li:nth-of-type(2), ul:nth-of-type(3) li:nth-of-type(2), ul:nth-of-type(4) li:nth-of-type(2){
background-color: #ff3300;
}

ul:nth-of-type(4) li:nth-of-type(3), ul:nth-of-type(4) li:nth-of-type(9), ul:nth-of-type(4) li:nth-of-type(6) {
background-color: #339933;
}

100 совпадание, но почему-то было смещение влево всех карточек, поэтому добавил в класс card отступ слева 19px

html,
body {
margin: 0;
padding: 0;
font-family: “Arial”, sans-serif;
}

body {
min-width: 550px;
min-height: 250px;
padding: 10px;
}

.cards {
width: 500px;
margin-left: 19px;
}

.cards li::before {
font-family: “Courier”, monospace;
}

li:nth-of-type(n+5), li:nth-of-type(-n+3) {
margin-left: -15px;
}

li:nth-of-type(n+5), li:nth-of-type(-n+3) {
width: 36px;
height: 54px;
}

li:nth-of-type(4) {
margin-right: 30px;
margin-left: 15px;
}

ul:nth-of-type(1) li:nth-of-type(9),
ul:nth-of-type(2) li:nth-of-type(3),
ul:nth-of-type(2) li:nth-of-type(5),
ul:nth-of-type(3) li:nth-of-type(1),
ul:nth-of-type(3) li:nth-of-type(7)
{
background-color: #0099ff;
}

ul:first-of-type li:nth-of-type(2),
ul:nth-of-type(3) li:nth-of-type(2),
ul:nth-of-type(4) li:nth-of-type(2)
{
background-color: #ff3300;
}

ul:nth-of-type(4) li:nth-of-type(3),
ul:nth-of-type(4) li:nth-of-type(6),
ul:nth-of-type(4) li:nth-of-type(9)
{
background-color: #339933;
}

Результат 90%. Но пришлось все же добавлять в CSS правки, которые по заданию не надо было добавлять. По тексту кода в комментарии указала, что внепланово добавила.

html,
body {
margin: 0;
padding: 0;
font-family: “Arial”, sans-serif;
}

body {
min-width: 550px;
min-height: 250px;
padding: 10px;
}

.cards {
width: 500px;
/* пришлось добавить этот отступ */
margin-left: 19px;
}

.cards li::before {
font-family: “Courier”, monospace;
}

.cards li:not(li:nth-child(5)):not(li:nth-child(6)) {
margin-left: -15px;
}

.cards li:not(li:nth-child(5)) {
width: 36px;
height: 54px;
}

/* пришлось добавить свои отступы */
li:nth-child(5) {
margin-right: 15px;
margin-left: 13px;
}

/* так и не смогла этот селектор определить
selector {
margin-right: 30px;
margin-left: 15px;
}
*/

.diamond:not(.nine):not(.cards:nth-of-type(4) li) {
background-color: #0099ff;
}

li:nth-child(3):not(.cards:nth-of-type(2) li) {
background-color: #ff3300;
}

.cards:nth-of-type(4) li:nth-child(4),
.cards:nth-of-type(4) li:nth-child(7),
.cards:nth-of-type(4) li:nth-child(10) {
background-color: #339933;
}

А я просто в этом правиле изменил Width с 500 на 518 (получается добавил 18пикселей от себя) и все получилось, 100%