ContextQMD
Back to Freecodecamp

Step 6

curriculum/challenges/english/blocks/workshop-game-settings-panel/68ee86e3ee07b01626a392cc.md

latest2.0 KB
Original Source

--description--

Within your .settings-card selector set the margin property to auto.

Setting the margin property to auto automatically adjusts the margins of an element to evenly distribute the remaining space in its container, commonly used to center block-level elements horizontally.

And last, set a text-align property with the value of left. This will align the inline content, such as text, to the left side of its containing element.

--hints--

You should add a margin property to the settings-card class selector.

js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.margin);

You should have a margin property with a value of auto.

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.margin, "auto");

You should add a text-align property to the settings-card class selector.

js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.textAlign);

You should have a text-align property with a value of left.

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.textAlign, "left");

--seed--

--seed-contents--

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Game Settings Panel</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="settings-card">
      <h1>Game Settings</h1>
      <label> <input type="checkbox" />Sound Effects</label>
      <label> <input type="checkbox" />Background Music</label>
      <label> <input type="checkbox" />Hard Mode</label>
      <label> <input type="checkbox" />Haptic feedback</label>
    </div>
  </body>
</html>
css
body {
  height: 100vh;
  background-color: #f0f0f0;
  text-align: center;
}

.settings-card {
  max-width: 250px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
--fcc-editable-region--
  
--fcc-editable-region--
}