curriculum/challenges/english/blocks/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
The goal now is to make the div not take up the entire width of the page. The CSS width property is perfect for this.
You can use the id selector to target a specific element with an id attribute. An id selector is defined by placing the hash symbol # directly in front of the element's id value. For example, if an element has the id of cat then you would target that element like this:
#cat {
width: 250px;
}
Use the #menu selector to give your element a width of 300px.
You should have a #menu selector.
const hasDiv = new __helpers.CSSHelp(document).getStyle("#menu");
assert(hasDiv);
You should set the width property to 300px.
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
assert(hasWidth);
Your div should have a width of 300px.
const divWidth = new __helpers.CSSHelp(document).getStyle("#menu")?.getPropertyValue('width');
assert(divWidth === '300px');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div id="menu">
<main>
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
<section>
<h2>Coffee</h2>
</section>
</main>
</div>
</body>
</html>
--fcc-editable-region--
body {
background-color: burlywood;
}
h1, h2, p {
text-align: center;
}
--fcc-editable-region--