<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…