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

Здравствуйте.

Извиняюсь сразу, так как могу плохо сформировать свою мысль.

Начал верстать, но возникла проблема при определение структуры на глаз.

Например, есть блок подписки. Где указана цена и т.д. На мой сырой взгляд, для меня это:

<div class="number1">
 <div class="nubmer2">
 и тут наконец добрались до содержимого
 </div>
</div>

А на деле оказалось, что там идёт див блок, затем ещё один див блок, дальше третий блок и только в нём уже идёт список элементов.

<div class="number1">
   <div class="number2">
      <div class="nubmer3">
 и тут наконец добрались до содержимого
     </div>
  </div>
</div>

Скрин и сайт данного макета - https://demo.cruip.com/solid/



Это придёт только с опытом? Так как в psd макетах настолько подробной структуры нет, ну или мне такие попались.