Library › Coding AI › High school students

Center a card in CSS using only what you've learned

Practice: Setting limits and rules. About 5 minutes.

About this exercise

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.

Common mistakes when you ask AI for this

  • Getting flexbox. The most common answer is display: flex on body, which you haven't learned and which changes the whole page. Try: Say: "No flexbox or grid. Use display: block, max-width and margin: 0 auto."
  • Missing the inline-block problem. margin: auto doesn't center an inline-block, so a fix that keeps it won't work. Try: Add: "Change display to block."
  • The whole stylesheet back. The AI reprints every rule and may change colors while it's there. Try: Add: "Return only the .card rule, keep its other lines unchanged."
  • A long CSS lesson. The AI explains the box model in paragraphs. Try: Add: "One code block, one short sentence at most."

What a strong prompt includes

  • Rules out flexbox and grid
  • Names the method
  • Mentions display
  • Asks for only the rule
  • Protects the other lines

Practice this now ↑

Related exercises