[9/20] Результат сдвинут влево, как можно исправить?

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

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

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

ul:not(:last-of-type) .diamond:not(.nine) {
    background-color: #0099ff;
}

ul:not(:nth-of-type(2)) li:nth-of-type(2) {
    background-color: #ff3300;
}

ul:last-of-type li:nth-of-type(3n) {
    background-color: #339933;
}

Этот селектор не работает у вас. Просто n нельзя писать.

Определенно проблема в этих двух тегах, но я упорно не понимаю, какие псевдоклассы могут исправить ее

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

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