Элементы div, начиная с nth-child(2) вместо nth-child(1) только в CodePen

Question

Вот ручка:

https://codepen.io/Blue_5/pen/pLKzmX?editors=0100

CSS:

.colors {
      position: absolute;
      top: 25px;
      height: 25px;
      width: 25px;
      border-radius: 100%;
    }
    .colors:nth-child(2) {
      /* The first Child */
      left: 65px;
      background: rgba(255, 128, 0, 1);
    }
    .colors:nth-child(3) {
      left: 105px;
      background: rgba(255, 255, 0, 1);
    }
    .colors:nth-child(4) {
      left: 145px;
      background: rgba(0, 160, 0, 1);
    }
    .colors:nth-child(5) {
      left: 185px;
      background: rgba(64, 200, 255, 1);
    }
    .colors:nth-child(6) {
      left: 225px;
      background: rgba(0, 128, 200, 1);
    }
    .colors:nth-child(7) {
      left: 265px;
      background: rgba(0, 0, 0, 1);
    }
    .colors:nth-child(1) {
      left: 305px;
      background: rgba(255, 0, 0, 1);
    }

<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>

HTML:

<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>

Я пытаюсь выбрать первый дочерний элемент с помощью nth-child(1) во фрагменте кода, здесь он работает нормально. Но то же самое не работает на CodePen. Это странно!

Пожалуйста, помогите мне!