(https://phpout.com/wp-content/uploads/2023/06/VY2lw.png)
I am trying to replicate the top-right picture. I added the colors, background colors and solid borders to see the elements properly, so I can set the widths and heights easier by visualizing them.
I tried removing margins and paddings however it doesn’t change the result.
2
Answers
Adding the following to your css should work:
You can learn more about how border-box works here: https://www.w3schools.com/css/css3_box-sizing.asp
Also, you can make css a lot easier if you look into learning Flexbox and CSS Grid to build your layouts.
The reason for the confusion of your plan is not using the property of box-sizing and setting the display of card children to the value of inline-block. You can easily reach your goal by using a flex.