curriculum/challenges/english/blocks/workshop-game-settings-panel/68e9a54dd97fd9091e18acce.md
Now create an h1 selector and set the text-align property with a value of center. This will center your h1 elements.
You should have a type selector in your CSS for the h1 element.
assert.exists(new __helpers.CSSHelp(document).getStyle("h1"));
You should add a text-align property to your h1 selector.
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle("h1")?.textAlign);
You should have a text-align property with a value of center.
assert.strictEqual(new __helpers.CSSHelp(document).getStyle("h1")?.textAlign, "center");
<!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>
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);
margin: auto;
text-align: left;
}
--fcc-editable-region--
--fcc-editable-region--