Retour à la leçon
Mission

Mission : réparer une grille de trois cartes qui déborde

Diagnostiquer un débordement de largeur causé par le box model par défaut, puis corriger sans changer les valeurs de width, padding ou border.

Contexte

Sur boutique.css, trois .carte-produit sont posées côte à côte dans un conteneur de 960px avec width: 300px, padding: 20px et border: 5px solid #333 chacune, sans aucune règle box-sizing définie nulle part dans le fichier. La troisième carte passe systématiquement à la ligne suivante, alors que 3 x 300px = 900px devrait largement tenir dans 960px.