{"id":"code-hs-css-center-card-no-flexbox","audience":"high-school","category":"coding","track":"coding","technique":"constraints","title":"Center a card in CSS using only what you've learned","free":false,"task":"On your portfolio page the .card box sits on the left instead of in the middle. Your class hasn't learned flexbox or grid yet, so fix it with display: block, a max-width of 600px and margin: 0 auto, keeping the card's existing background, border and padding lines unchanged. Return only the .card rule in exactly 1 code block of at most 10 lines, with under 30 words of text.","materialLabel":"Your page's CSS and HTML (attached to your prompt automatically)","material":"/* style.css - Maya's portfolio, Web Design 1 */\nbody {\n  font-family: Georgia, serif;\n  background: #f4f1ea;\n  color: #222;\n}\n\nh1 {\n  text-align: center;\n  color: #1f4e9c;\n}\n\n.card {\n  display: inline-block;\n  background: white;\n  border: 2px solid #1f4e9c;\n  padding: 24px;\n  text-align: center;\n}\n\n.card img {\n  width: 100%;\n  border-radius: 8px;\n}\n\nfooter {\n  margin-top: 40px;\n  font-size: 14px;\n}\n\n<!-- index.html (part) -->\n<body>\n  <h1>Maya Torres</h1>\n  <div class=\"card\">\n    <img src=\"robot.jpg\" alt=\"Our robot at the regional competition\">\n    <p>Built the drive train for our team's robot. 3rd place at regionals!</p>\n  </div>\n  <footer>Made in Web Design 1</footer>\n</body>\n\n<!-- I tried text-align: center on .card and only the words moved. -->","rules":[{"type":"codeBlocks","count":1},{"type":"maxCodeLines","max":10},{"type":"maxProseWords","max":30}],"mistakes":[{"title":"Getting flexbox","why":"The most common answer is display: flex on body, which you haven't learned and which changes the whole page.","fix":"Say: \"No flexbox or grid. Use display: block, max-width and margin: 0 auto.\"","checks":["r1","r0"]},{"title":"Missing the inline-block problem","why":"margin: auto doesn't center an inline-block, so a fix that keeps it won't work.","fix":"Add: \"Change display to block.\"","checks":["r0"]},{"title":"The whole stylesheet back","why":"The AI reprints every rule and may change colors while it's there.","fix":"Add: \"Return only the .card rule, keep its other lines unchanged.\"","checks":["r2","maxCodeLines"]},{"title":"A long CSS lesson","why":"The AI explains the box model in paragraphs.","fix":"Add: \"One code block, one short sentence at most.\"","checks":["codeBlocks","maxProseWords"]}],"promptHints":[{"label":"Rules out flexbox and grid","patterns":["flex","grid","haven'?t learned"]},{"label":"Names the method","patterns":["margin:? ?0 auto","margin auto","max-width"]},{"label":"Mentions display","patterns":["display","inline-block","block"]},{"label":"Asks for only the rule","patterns":["only the.{0,10}\\.?card","just the.{0,10}rule"]},{"label":"Protects the other lines","patterns":["keep","unchanged","don'?t change"]}],"hint":"There are many ways to center things, and the AI will pick one you haven't learned. Tell it which tools you're allowed, and that you only want the one rule back.","rubricLabels":["Centers the card with display: block (replacing inline-block), max-width: 600px and margin: 0 auto","Does not use flexbox or grid anywhere (no display: flex, display: grid, justify-content or place-items)","Returns only the .card rule, and its background: white, border: 2px solid #1f4e9c, padding: 24px and text-align: center lines are unchanged"]}