CSS styling with nested elements

Question

I can do everything with html, JS and PHP, but i can never get CSS to do what I want.
i put spans inside of spans, and i want to give the outer span its own background and size, so the others appear inside of the elder spans. but whenever i try to give the elder spans a certain size or background, all it does is inherit all of the properties to its children.
but this of course is not what I want.
i took out the code thats giving me trouble and the link is found below
https://code.sololearn.com/W0T3BBDJ6f24/#html
does anyone know how to tame this wild and stubborn beast called CSS and get it to do what you want?

Answer 1

i suggest you to use div as a container instead of span ,then it will be easy for you

Answer 2

I've tried this, doesn't change the fact that it's all inherited to its children

Answer 3

wait i will send you exact what you want with span

Answer 4

Sorry, It actually works now, I feel really embarrassed, must've been one of those small and dumb mistakes. thanks allot though, your help is appreciated

Answer 5

ok well then good night