Почему не удается обратиться к тегам li по классу?

Question

[Enter_a_nickname]

мой html

<aside>
        <ul class="demo-two">
             <li class="one"><a href="#">Ссылка</a></li>
             <li class="two"><a href="#">Ссылка</a></li>
             <li class="three"><a href="#">Ссылка</a></li>
             <li class="four"><a href="#">Ссылка</a></li>
        </ul>
</aside>

мой css:

.demo-two {
  li {
    padding: 5px 0 5px 30px;

    &.one {
      background: red;
    }

    &.two {
      background: red;
    }
  }
}

Почему не удается обратиться к классам? Нет никаких изменений

При этом если я изменю css следующим образом мне удается изменить фон и шрифт, но не удается изменить расположение

.one {
      background: red;
      top: 420px;
      left: 420px;
      font-family: 'Roboto';
      font-size: 14px;
    }

Что я делаю не так?

Answer 1

[wonderingpeanut]

в css нет вложенных селекторов