Потому что у вас в html каждый тег Р является дочерним для DIV. То есть, буквально у каждого из ваших дивов есть непосредственно-дочерний Р. Вот оно и действует.
То есть, ваш div>p в данном случае ко всем таким местам:
![4a4f5495783b466f8c61cb5fb31a3653.png](https://habrastorage.org/files/4a4/f54/957/4a4f5495783b466f8c61cb5fb31a3653.png)
Решение - ограничить селектор div конкретно самым верхним в иерархии. Например, вот так:
jsfiddle.net/smsnvkvc
Начните с простого:
htmlacademy.ru. Там этой самой вложенности добрая четверть уроков отведена. За месяц всем азам научитесь.