Files
freeCodeCamp/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
Naomi Carrigan 16e7cdedb1 feat: migrate filenames to IDs (#45146)
* feat: migrate filenames to IDs

* feat: migrate balance sheet file names

* revert: no id name for cert projects

* fix: i swear i know what i'm doing
2022-03-02 09:06:00 -06:00

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