59c24bd4be
* chore: rename files * chore: update codebase * chore: proper title case * chore: missed block name Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
1.4 KiB
1.4 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5f356ed60785e1f3e9850b6e | Step 25 | 0 | step-25 |
--description--
Now it's easy to see that the text is centered inside the div element. Currently, the width of the div element is specified in pixels (px). Change the width property's value to be 80%, to make it is 80% the width of its parent element (body).
--hints--
You should set the width property to 80%.
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
assert(hasWidth);
You should not have a width property of 300px.
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
assert(!hasWidth);
--seed--
--seed-contents--
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Camper Cafe Menu</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<header>
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
</header>
<main>
<section>
<h2>Coffee</h2>
</section>
</main>
</div>
</body>
<html>
body {
/*
background-color: burlywood;
*/
}
h1, h2, p {
text-align: center;
}
--fcc-editable-region--
div {
width: 300px;
background-color: burlywood;
}
--fcc-editable-region--