<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 */Live preview updates as you type
Building preview…