Can anyone help me figure out why my code is not passing this user story:
Failed:You should have the same number of ‘.nav-link’ and ‘.main-section’ elements.
Your code so far
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" />
<title>Technical Documentation</title>
<link rel="stylesheet" href="styles.css" />
</head>
<nav id="navbar">
<header class="top">Flex Box</header>
<ul>
<a class="nav-link" href="#Introduction" rel="internal"><li>Introduction</li></a>
<a class="nav-link" href="#Why_Flex_Box?" rel="internal"><li>Why Flex Box?</li></a>
<a class="nav-link" href="#Introducing_a_simple_example" rel="internal"><li>Introducing a simple example</li></a>
<a class="nav-link" href="#Specifying_elements_to_lay_out_as_flexible_boxes" rel="internal"><li>Specifying elements to lay out as flexible boxes</li></a>
<a class="nav-link" href="#The_flex_model" ><li>The flex model</li></a>
<a class="nav-link" href="#Columns_or_rows?" ><li>Columns or rows?</li></a>
<a class="nav-link" href="#Wrapping" ><li>Wrapping</li></a>
<a class="nav-link" href="#flex_flow_shorthand" ><li>flex flow shorthand</li></a>
<a class="nav-link" href="#Flexible_sizing_of_flex_items" ><li>Flexible sizing of flex items</li></a>
<a class="nav-link" href="#flex_shorthand_versus_longhand" ><li>flex shorthand versus longhand</li></a>
<a class="nav-link" href="#Ordering_flex_items" ><li>Ordering flex items</li></a>
<a class="nav-link" href="#Summery" ><li>Summary</li></a>
</ul>
</nav>
<main id="main-doc">
<!--NEW SECTION/-->
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces. This article explains all the fundamentals.</p>
</section>
<hr>
<!--NEW SECTION/-->
<section class="main-section" id="Why_Flex_Box?">
<header>Why Flex Box?</header>
<p>For a long time, the only reliable cross-browser compatible tools available for creating CSS layouts were features like <a>floats</a> and <a>positioning</a>. These work, but in some ways they're also limiting and frustrating.
The following simple layout designs are either difficult or impossible to achieve with such tools in any kind of convenient, flexible way:
<ul>
<li>Vertically centering a block of content inside its parent.</li>
<li>Vertically centering a block of content inside its parent.</li>
<li>Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.</li>
</ul>
As you'll see in subsequent sections, flexbox makes a lot of layout tasks much easier. Let's dig in!
</p>
</section>
<hr>
<!--NEW SECTION/-->
<section class="main-section" id="Introducing_a_simple_example">
<header>Introducing a simple example</header>
<p>In this article, you'll work through a series of exercises to help you understand how flexbox works. To get started, you should make a local copy of the first starter file — <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> from our GitHub repo. Load it in a modern browser (like Firefox or Chrome) and have a look at the code in your code editor. You can also see it <a href="https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">live here</a>.
You'll see that we have a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header"><code><header></code></a> element with a top level heading inside it and a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section"><code><section></code></a> element containing three <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article"><code><article></code></a> 's. We're going to use these to create a fairly standard three column layout.
</p>
</section>
<hr>
<!--NEW SECTION/-->
<section class="main-section" id="Specifying_elements_to_lay_out_as_flexible_boxes">
<header>Specifying elements to lay out as flexible boxes</header>
<p>To start with, we need to select which elements are to be laid out as flexible boxes. To do this, we set a special value of display on the parent element of the elements you want to affect. In this case we want to lay out the <a href=""><code><article></code></a> elements, so we set this on the <a href=""><code><section></code></a>:</p>
<code class="snip"> <span>section {</span>
<span> display: flex;</span>
<span>}</code></span>
<p>This causes the <a href=""><code><section>;</code></a> element to become a flex container and its children to become flex items. The result of this should be something like so:
So, this single declaration gives us everything we need. Incredible, right? We have our multiple column layout with equal-sized columns, and the columns are all the same height. This is because the default values given to flex items (the children of the flex container) are set up to solve common problems such as this.
To be clear, let's reiterate what is happening here. The element we've given a <a>display</a> value of flex to is acting like a block-level element in terms of how it interacts with the rest of the page, but its children are laid out as flex items. The next section will explain in more detail what this means. Note also that you can use a display value of inline-flex if you wish to lay out an element's children as flex items, but have that element behave like an inline element.
</p>
</section>
<hr>
<!--NEW SECTION/-->
<section class="main-section" id="The_flex_model">
<header>The flex model</header>
<p>When elements are laid out as flex items, they are laid out along two axes:</p>
<ul>
<li>The main axis is the axis running in the direction the flex items are laid out in (for example, as rows across the page, or columns down the page.) The start and end of this axis are called the main start and main end.</li>
<li>The cross axis is the axis running perpendicular to the direction the flex items are laid out in. The start and end of this axis are called the cross start and cross end.</li>
<li>The parent element that has display: flex set on it (the <a href=""><code><section></code></a> in our example) is called the flex container.</li>
<li>The items laid out as flexible boxes inside the flex container are called flex items (the <a href=""><code><article></code></a> elements in our example).</li>
</ul>
<p>Bear this terminology in mind as you go through subsequent sections. You can always refer back to it if you get confused about any of the terms being used.</p>
</section>
<hr>
<!--NEW SECTION/-->
<section class="main-section" id="Columns_or_rows?">
<header>Columns or rows?</header>
<p>Flexbox provides a property called flex-direction that specifies which direction the main axis runs (which direction the flexbox children are laid out in). By default this is set to row, which causes them to be laid out in a row in the direction your browser's default language works in (left to right, in the case of an English browser).
Try adding the following declaration to your <a href=""><code><section></code></a> rule:</p>
<div>flex-direction: column;</div>
<p>You'll see that this puts the items back in a column layout, much like they were before we added any CSS. Before you move on, delete this declaration from your example.</p>
</section>
<hr>
<!--NEW SECTION/-->
<section class="main-section" id="Wrapping">
<header>Wrapping</header>
<p>One issue that arises when you have a fixed width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout. Have a look at our flexbox-wrap0.html example and try viewing it live. Here we see that the children are indeed breaking out of their container. One way in which you can fix this is to add the following declaration to your <a href=""><code><section></code></a> rule:</p>
<code class="snip">flex-wrap: wrap;</code>
<p>Also, add the following declaration to your <a href=""><code><article></code></a> rule:</p>
<code class="snip">flex: 200px;</code>
<p>Try this now. You'll see that the layout looks much better with this included:</p>
<p>We now have multiple rows. Each row has as many flexbox children fitted into it as is sensible. Any overflow is moved down to the next line. The flex: 200px declaration set on the articles means that each will be at least 200px wide. We'll discuss this property in more detail later on. You might also notice that the last few children on the last row are each made wider so that the entire row is still filled.</p>
<p>But there's more we can do here. First of all, try changing your flex-direction property value to row-reverse. Now you'll see that you still have your multiple row layout, but it starts from the opposite corner of the browser window and flows in reverse.</p>
</section>
<hr>
<!--NEW SECTION/-->
<section class="main-section" id="flex_flow_shorthand">
<header>flex flow shorthand</header>
<p>At this point it's worth noting that a shorthand exists for flex-direction and flex-wrap: flex-flow. So, for example, you can replace</p>
<code class="snip">flex-direction: row;</code>
<code class="snip">flex-wrap: wrap;</code>
<p>with</p>
<code class="snip">flex-flow: row wrap;</code>
</section>
<hr>
<!--NEW SECTION/-->
<section class="main-section" id="Flexible_sizing_of_flex_items">
<header>Flexible sizing of flex items</header>
<header>Flexible sizing of flex items</header>
<p>Let's now return to our first example and look at how we can control what proportion of space flex items take up compared to the other flex items. Fire up your local copy of flexbox0.html, or take a copy of flexbox1.html as a new starting point (see it live).</p>
<p>First, add the following rule to the bottom of your CSS:</p>
<code class="snip">
<span>article {</span>
<span>flex: 1;</span>
<span>}</span>
</code>
<p>This is a unitless proportion value that dictates how much available space along the main axis each flex item will take up compared to other flex items. In this case, we're giving each <a href=""><code><article></code></a> element the same value (a value of 1), which means they'll all take up an equal amount of the spare space left after properties like padding and margin have been set. This value is proportionally shared among the flex items: giving each flex item a value of 400000 would have exactly the same effect.</p>
<p>Now add the following rule below the previous one:</p>
<code class="snip">
<span>article:nth-of-type(3) {</span>
<span> flex: 2;</span>
<span>}</span>
</code>
<p>Now when you refresh, you'll see that the third <a href=""><code><article></code></a> takes up twice as much of the available width as the other two. There are now four proportion units available in total (since 1 + 1 + 2 = 4). The first two flex items have one unit each, so they each take 1/4 of the available space. The third one has two units, so it takes up 2/4 of the available space (or one-half).</p>
<p>You can also specify a minimum size value within the flex value. Try updating your existing article rules like so:
</p>
<code class="snip">
<span> article {</span>
<span> flex: 1 200px;</span>
<span> }</span>
<span> article:nth-of-type(3) {</span>
<span> flex: 2 200px;</span>
<span> }</span>
</code>
<p>This basically states, "Each flex item will first be given 200px of the available space. After that, the rest of the available space will be shared according to the proportion units." Try refreshing and you'll see a difference in how the space is shared.</p>
<p>The real value of flexbox can be seen in its flexibility/responsiveness. If you resize the browser window or add another <a href=""><code><article></code></a>element, the layout continues to work just fine.</p>
</section>
<hr>
<!--NEW SECTION/-->
<section class="main-section" id="flex_shorthand_versus_longhand">
<header>flex shorthand versus longhand</header>
<p><a>flex</a> is a shorthand property that can specify up to three different values:</p>
<ul>
<li>The unitless proportion value we discussed above. This can be specified separately using the <a>flex-grow</a> longhand property.</li>
<li>A second unitless proportion value, <a>flex-shrink</a>, which comes into play when the flex items are overflowing their container. This value specifies how much an item will shrink in order to prevent overflow. This is quite an advanced flexbox feature and we won't be covering it any further in this article.</li>
<li>The minimum size value we discussed above. This can be specified separately using the <a>flex-basis</a> longhand value</li>
</ul>
<p>We'd advise against using the longhand flex properties unless you really have to (for example, to override something previously set). They lead to a lot of extra code being written, and they can be somewhat confusing.</p>
</section>
<hr>
<!--NEW SECTION/-->
<section class="main-section" id="Ordering_flex_items">
<header>Ordering flex items</header>
<p>Flexbox also has a feature for changing the layout order of flex items without affecting the source order. This is another thing that is impossible to do with traditional layout methods.</p>
<p>The code for this is simple. Try adding the following CSS to your button bar example code:</p>
<code class="snip">
<span>button:first-child {</span>
<span> order: 1;</span>
<span>}</span>
</code>
<p>Refresh and you'll see that the "Smile" button has moved to the end of the main axis. Let's talk about how this works in a bit more detail:</p>
<ul>
<li>By default, all flex items have an order value of 0.</li>
<li>Flex items with higher specified order values will appear later in the display order than items with lower order values.</li>
<li>Flex items with the same order value will appear in their source order. So if you have four items whose order values have been set as 2, 1, 1, and 0 respectively, their display order would be 4th, 2nd, 3rd, then 1st.</li>
<li>The 3rd item appears after the 2nd because it has the same order value and is after it in the source order.</li>
</ul>
<p>You can set negative order values to make items appear earlier than items whose value is 0. For example, you could make the "Blush" button appear at the start of the main axis using the following rule:</p>
</section>
<hr>
<!--NEW SECTION/-->
<section class="main_section" id="Summary">
<header>Summary</header>
That concludes our tour of the basics of Flexbox. We hope you had fun and will have a good play around with it as you proceed further with your learning. Next, we'll have a look at another important aspect of CSS layouts: <a>CSS Grids</a>.
</section>
<hr>
<section>
<h1>Reference</h1>
<p>All information on this page was aqquired from <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">MDN - Learn Flexbox</a> </p>
</section>
</main>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: