FrontendAtlas
Study
▾
Dashboard
Pricing
Get full access
<html> HTML
<div class="box"> <h2>Centered Content</h2> <p class="chips"> <span class="tag">HTML</span><span class="tag">CSS</span><span class="tag">UI</span> </p> </div>
# CSS
/* TODOs: 1) Center the chips as a group using text-align: center (on .chips or .box). 2) Make .tag inline-block with padding 8px/12px and radius 6px. 3) Create ~8px horizontal gaps between tags using margin-right. */ body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 2rem; line-height: 1.6; background: #fafafa; } .box { background: #222; color: #fff; padding: 20px; border: 1px solid #444; border-radius: 10px; max-width: 600px; margin: 0 auto; /* optional: centers the box in the viewport */ } .chips { margin-top: 12px; /* Add text-align: center here */ } .tag { background: #e63946; color: #fff; font-weight: 600; letter-spacing: 0.5px; /* Add display, padding, radius, and spacing here */ } /* Hint: use .tag:last-child { margin-right: 0; } to remove the final gap */
Preview
Live preview updates as you type
Building preview…
Show preview