CSS calc() Function

The product card should fill the window but leave 20px of space on each side. Its width is therefore "the full width minus 40px", and no single unit can express that, because one part is a percentage and the other is a fixed length. The calc() function solves this problem. It takes an arithmetic expression, mixes units inside it, and lets the browser work out the result when it lays out the page.

A card that leaves room for its margins

Here is a first attempt. The width is calc(100% - 40px), and the 40px is meant for the two 20px margins:

<!DOCTYPE html>
<html>
<head>