Tell us what’s happening:
Describe your issue in detail here.
Can’t pass the tests
Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.
Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).
i checked it menu times , but can’t find mistakes .
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Documentation Page</title>
<link rel="stylesheet" href="./styles.css">
</head>
<nav id="navbar">
<header>CSS Layout - The display Property</header>
<ul>
<li><a class="nav-link" href="#The_display_Property">The display Property</a></li>
<li><a class="nav-link" href="#Block_level_Elements">Block level Elements</a></li>
<li><a class="nav-link" href="#Inline_Elements">Inline Elements</a></li>
<li><a class="nav-link" href="#Override_The_Default_Display_Value">Override The Default Display Value</a></li>
<li><a class="nav-link" href="#Hide_an_Element">Hide an Element</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="The_display_Property">
<header>The display Property</header>
<p>The display property is the most important CSS property for controlling layout.The display property specifies if/how an element is displayed.
</p>
</section>
<section class="main-section" id="Block_level_Elements">
<header>Block level Elements</header>
<p>A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).</p>
<p>The < div > element is a block-level element.</p>
<p>Examples of block-level elements:</p>
<ul>
<li> < div > </li>
<li> < h1 > - < h6 ></li>
<li> < p ></li>
<li> < form > </li>
<li> < header ></li>
<li> < footer > </li>
<li> < section ></li>
</ul>
</section>
<section class="main-section" id="Inline_Elements">
<header>Inline Elements</header>
<p>An inline element does not start on a new line and only takes up as much width as necessary.This is an inline < span > element inside a paragraph.</p>
<p>Examples of inline elements:</p>
<ul>
<li> < span > </li>
<li> < a > </li>
<li> < img ></li>
</ul>
<code></code>
</section>
<section class="main-section" id="Override_The_Default_Display_Value">
<header>Override The Default Display Value</header>
<p>As mentioned, every element has a default display value. However, you can override this.</p>
<p>Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards.</p>
<p>A common example is making inline < li > elements for horizontal menus:</p>
<p><code>li {
display: inline; }</code></p>
<p>Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with <code>display: block;</code> is not allowed to have other block elements inside it.</p>
<p>The following example displays < span > elements as block elements:</p>
<p><code>span { display: block; }</code></p>
<p>The following example displays < a > elements as block elements:</p>
<p><code>a { display: block; }</code></p>
</section>
<section class="main-section" id="Hide_an_Element">
<header>Hide an Element</haeder>
<p>Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there:</p>
<p>Example display none:</p>
<p><code>h1.hidden { display: none; }</code></p>
<p><code>visibility:hidden;</code> also hides an element.
However, the element will still take up the same space as before. The element will be hidden, but still affect the layout:</p>
<p>Example visibility hidden:</p>
<p><code>h1.hidden { visibility: hidden; }</code></p>
</section>
</main>
</html>
/* file: styles.css */
**Your browser information:**
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge:
