Technical Documentation Page - Build a Technical Documentation Page

Hello could someone please help me out with this, been trying and can’t seem to pass the last few points.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <style>
      body {
        margin:0;
        padding: 0;
        font-size: 100%;
      }
      #main-doc {
        width: 80%;
        float:right;
      }
.left {
  width: 20%;
  float: left;
}
nav {
  margin:0;
  padding:0;
  list-style: none;
}
nav li {
  margin: 1px 0;
  border: 1px solid #999;
}
nav li a {
  display: block;
  line-height: 3em;
  width: 100%;
  text-decoration: none;
}

@media (max-width: 480px) {
  p {
    font-size: 18px;
  }
}
    </style>
  </head>
  <body>
    <main id="main-doc">
      <section class="main-section" id="Flexbox">
        <header>Flexbox</header>
        <p>
          The Flexible Box Module, usually referred to as flexbox, was designed
          as a one-dimensional layout model, and as a method that could offer
          space distribution between items in an interface and powerful
          alignment capabilities. This article gives an outline of the main
          features of flexbox, which we will be exploring in more detail in the
          rest of these guides.
        </p>

        <p>
          When we describe flexbox as being one dimensional we are describing
          the fact that flexbox deals with layout in one dimension at a time —
          either as a row or as a column. This can be contrasted with the
          two-dimensional model of CSS Grid Layout, which controls columns and
          rows together.
        </p>
        <code>flex-direction: row; flex-wrap: wrap; </code>
      </section>

      <section class="main-section" id="Grid">
        <header>Grid</header>
        <p>
          CSS Grid Layout introduces a two-dimensional grid system to CSS. Grids
          can be used to lay out major page areas or small user interface
          elements. This article introduces the CSS Grid Layout and the new
          terminology that is part of the CSS Grid Layout Level 1 specification.
          The features shown in this overview will then be explained in greater
          detail in the rest of this guide.
        </p>
        <p>
          You can create a grid with fixed track sizes using pixels for example.
          This sets the grid to the specified pixel which fits to the layout you
          desire. You can also create a grid using flexible sizes with
          percentages or with the fr unit designed for this purpose.
        </p>
        <code
          >.container { display: grid; grid-template-columns: 200px 200px 200px;
          }
        </code>
      </section>

      <section class="main-section" id="Box_Model">
        <header>Box Model</header>
        <p>
          In CSS we broadly have two types of boxes — block boxes and inline
          boxes. The type refers to how the box behaves in terms of page flow
          and in relation to other boxes on the page.
        </p>
        <p>
          Boxes have an inner display type and an outer display type. In
          general, you can set various values for the display type using the
          display property, which can have various values.
        </p>
        <code
          >p, ul { border: 2px solid rebeccapurple; } span, li { border: 2px
          solid blue; } ul { display: inline-flex; list-style: none; padding: 0;
          } .inline { display: inline; }
        </code>
      </section>

      <section class="main-section" id="Layouts">
        <header>Layouts</header>
        <ul>
          <li>Normal flow</li>
          <li>Flexbox</li>
          <li>Grids</li>
          <li>Floats</li>
          <li>Positioning</li>
        </ul>
        <p>
          At this point, we've looked at CSS fundamentals, how to style text,
          and how to style and manipulate the boxes that your content sits
          inside. Now it's time to look at how to correctly arrange your boxes
          in relation to the viewport as well as to one another. We've covered
          the necessary prerequisites, so let's dive deep into CSS layout,
          looking at such various features as: different display settings,
          positioning, modern layout tools like flexbox and CSS grid, and some
          of the legacy techniques you might still want to know about.
        </p>
        <p>
          For many of the elements on your page, the normal flow will create
          exactly the layout you need. However, for more complex layouts you
          will need to alter this default behavior using some of the tools
          available to you in CSS. Starting with a well-structured HTML document
          is very important because you can then work with the way things are
          laid out by default rather than fighting against it.
        </p>
        <code
          >.info-box li { float: left; list-style-type: none; width: 150px; }
          .info-box li a { display: inline-block; text-decoration: none; width:
          100%; line-height: 3; background-color: red; color: black; text-align:
          center; }
        </code>
      </section>

      <section class="main-section" id="Images">
        <header>Images<header>
        <p>
          Images and video are described as replaced elements. This means that
          CSS cannot affect the internal layout of these elements — only their
          position on the page amongst other elements. As we will see however,
          there are various things that CSS can do with an image.
        </p>

        <p>
          Certain replaced elements, such as images and video, are also
          described as having an aspect ratio. This means that it has a size in
          both the horizontal (x) and vertical (y) dimensions, and will be
          displayed using the intrinsic dimensions of the file by default.
        </p>
        <code>.box { width: 200px; } img { } </code>
      </section>



   
    </main>
    <nav id="navbar">
      <div class="left">
      <header>CSS Documentation</h1></header>
      <li><a class="nav-link" href="#Flexbox">Flexbox</a></li>
      <li><a class="nav-link" href="#Grid">Grid</a></li>
      <li><a class="nav-link" href="#Box_Model">Box Model</a></li>
      <li><a class="nav-link" href="#Layouts">Layouts</a></li>
      <li><a class="nav-link" href="#Images">Images</a></li>
</div>
    </nav>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

please fill the template by pasting the code in the block

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Thank you so much for you’re help :grinning:

1 Like

To pass the media link test you should follow the instructions:

Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

and put all your css in the styles.css

(it has been noted before that if you remove the link element to the stylesheet, you can also pass the test and keep your <style> element as is)