Как сделать красивые отступы в древе?

Question

[podushka]

Здравствуйте! Есть на сайте такое древо:

<div class="item">
     <div class=content">Элемент 1</div>
     <div class="items">
          <div class="item">
               <div class=content">Элемент 1</div>
          </div>
     </div>
</div>

при наведении на content, он меняет цвет бэка. в каждом элементе есть контейнер для дочерних элементов (items), и у него есть отступ от левого края. так вот, первый элемент показывается красиво, а вот уже последующий с огромным отступом. так вот, хочется для каждого дочернего элемента сделать внутренний отступ (а не тот внешний, который для items), чтобы цвет при наведение заливался на всю ширину элемента

https://jsfiddle.net/p3805hra/
вот здесь видно, что элемент 2 при наведении с отступом слева

Comments

[Виктор]

html не достаточно, нужен css этих классов

[Алексей Уколов]

Сделайте пример в песочнице, по вашему описанию и без стилей непонятно ровно ничего.

[IvanU7n]

если я правильно понял суть, то нужно использовать padding вместо margin для отступов

[podushka]

IvanU7n, да, правильно!

[Ankhena]

Так и делайте паддинг для content

Answer 1

[podushka]

Решил!
margin у items убрал. У каждого элемента есть data-level (типо 0 - корень, 1 - 1 уровень, 2 - 2 уровень и т.д.). Все элементы берутся с сервера, поэтому просто умножаю этот level на 30 (отступ в px), в итоге получается как надо

Comments

[Виктор]

Вопрос был поставлен некорректно. Про data атрибуты ничего не сказано, тег css, получение data атрибута для умножения в css невозможно.