NFT Preview Card(Not Ideal Solution But This Is To Show How Far I Got)

1- width: 17vw; height: 60vh; Only removing these propertis makes a huge difference in how the layout look and behaves.

2- <section> element is a general sectioning element but it shoudn't be used as container where a div can be used, which is the case for "price-and-time" and "person-and-image".

3- This is just a tips, whenever you come across something new that you don't know how to implement, the first thing you shoud do is spend some time grasping what you're building, you evetually develop you own method if you keep doing these challanges. The purpose of doing these challanges is not to just get them done as quickly you can but rather to focus on learning.

Keep coding :=)

Avoid giving % value to width or height. Here you used vw which is basicaly the same. Some time it has its use but when you can avoid it, avoid it. Give your container fix width. You can then use max-width and give a %.

On the time-price container. Flexbox might have been a better idea. You can use the justify-content: space-between to put the price container on one side and the time container on the other side. Do not use margin to do this on the time-container. This is a really bad habit; flexbox is a very powerfull tool now.

I advice you to train yourself on how Flexbox works because basically everything can be done with flexbox now.

Try this website to learn how to use flexbox : flexboxfroggy.com/#en