зачем span если есть div? почему когда я задаю ширину спана процентами получаю тоненькую палочку?

У них колоссальная разница. Например если нужно будет что-нибудь сделать с частью текста через CSS, то для этого только span. Дивом не получится, div во первых будет переноситься на новую стороку, во вторых будет переносить на новую строку всё что идет после него. Сами попробуйте и посмотрите на то что из этого выйдет

div { display: block; }

span { display: inline; }

Вот и вся разница между ними) У них по умолчанию стоят такие значения display

Если в своём коде написать span { display: block; } — он начнет вести себя как див. Но в этом просто нет необходимости... можно просто использовать каждый по назначению)) Спан как правило используют, чтобы где-то покрасить текст, менять шрифт, его размер и т. п.

Если хочется расположить div-блоки рядом, для этого можно добавить им

display: inline-block; width: 33%;

и играться с размерами → https://jsfiddle.net/OPTlMUS/9mnobcv3/

Но в таких случаях проще использовать display: flex → https://jsfiddle.net/OPTlMUS/g4e8v2xs/

P.s. НЕЛЬЗЯ использовать больше одного одинакового id на странице. Его смысл в том, чтобы дать элементу уникальное "имя". Для стилей используйте class.

Следствием всего вышесказанного является, что невозможно задать спану высоту и ширину.

следствием вышесказанного является, что возможно задать и высоту, и ширину, и глубину, было бы желание и знания

span - строчный элемент, предназначен для форматирования через CSS текстовых абзацев. div - блочный элемент, является кирпичом для объединения нескольких блоков в один. Больше информации найдешь об этом тут webref.ru