Why is my css width and height not working

HTML-CSS
1

In CSS I set an image so its width and height are a certain thing so my image does not go under my text but it does not work even with the !important thing.

Go here and click on woodcutting then inspect Gem Hunt

2

What do you mean by “so my image does not go under my text”?

3

The tree should not be like acting as a background and go “behind/under” the tree should move down so the text won’t be ontop of it. As shown.

image
image1938×862 280 KB

4

It is because you are using absolute positioning. I would make the div with class="grass shadow" use display: flex. Then you will need to adjust the text and the time elements to get the alignment you want for them.

5

I wanted to mimic something like this will it?

image
image1183×491 83.3 KB

6

The display: flex will help you get there. Again, you will need to adjust other classes/styling to get the centering you want of the elements. To have the text at the top and the items images, you will need to adjust the flex-basis for the items and also need to potentially adjust the height of the overall container.

7

I applied it It looks still the same and I have no experience in flex.

8

You can learn about it by building a practice project based on flexbox.

9

fixed! Now I can do the centering I don’t need your help anymore. All I did was add the flexbox and removed the position absolute.

image
image1424×607 141 KB