All solutions

Thanks to this challe i understand better how sizing works in css but there's still 1 issue that i'd like to solve:

• In this example each colored card has a certain width and some padding. When i want to specify a width with % i have to calculate manually the proportion of my desired width relative to the actual free space (that is card width - padding). In my css there are 2 cases (lines 138 and 167) in which i had to do that manually but i'm sure there's a smarter way to do that. I just want to specify width relative to the total width of the container, not the available width.

Hi, this is my first try at html and css so i have some doubts i couldn't figure out by myself (lines refer to css file):

1. line 42: I specified margins in order to center my card but i think it shouldn't be needed. I tried different align and justify properties but none of them centered the .card div in the viewport

2. line 112, the most troublesome part: I wanted the image to take 48% of the whole card. I thought to specify width=48% since .bg-image is direct child of .card. But this only let the image take less than 25% (width values). Also setting width to 100% makes the image take less then half of the .card container. I can't understand how the width percentages work. I also used viewport height and width (vh and vw) because i thought that 100vw should have let the image cover the whole viewport but instead only took about half of the card container, so there's obviously something I'm missing. I'd really like an explaination for this behaviour

3. line 118: i'm not sure this is the smartest way to set the padding. Suggestions? Thanks in advance