Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

Hey there As I work on the left side navigation bar, I’m having trouble with the top border not going all the way to the left. Could you please help me fix this?

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-document-page</title>
    <link rel="stylesheet" href="styles.css"> 
  </head>
  <body>
    <nav id="navbar">
      <header>Washing Machine Manual</header>
      <ul>
        <li><a href="#Introduction" class="nav-link">Introduction</a></li>
        <li>
          <a href="#Description_of_control_panel" class="nav-link">Description of control panel</a>
        </li>
        <li><a href="#Using_the_appliance" class="nav-link">Using the appliance</a></li>
        <li>
          <a href="#Table_of_programmes" class="nav-link">Table of programmes</a>
        </li>
        <li>
          <a href="#Maintenance_and_cleaning" class="nav-link">Maintenance and cleaning</a>
        </li>
      </ul>
    </nav>
    <main id="main-doc">
      <section class="main-section" id="Introduction">
        <header>Introduction</header>
        <article>
          <p>This manual will guide you through the process of using your machine effectively and efficiently, ensuring your clothes come out clean and fresh every time.</p>
          <p><b>Before You Begin:</b></p>
          <ul>
            <li>
              <b>Safety First:</b> 
              <p>Always follow the specific safety instructions provided in your machine's manufacturer manual. This includes information on <code>electrical connections</code>, <code>water supply</code>, and proper handling.</p>
            </li>
            <li>
              <b>Know Your Machine:</b> 
              <p>Familiarize yourself with the <code>control panel</code>, different <code>wash cycles</code>, and <code>settings</code> available on your machine.</p>
            </li>
            <li>
              <b>Sort Your Laundry:</b> 
              <p>Separate your clothes into different piles based on <code>color</code> (whites, lights, darks) and <code>fabric type</code> (cottons, delicates, synthetics). This helps prevent color bleeding and damage to delicate fabrics.</p>
            </li>
          </ul>
        </article>
      </section>

      <section class="main-section" id="Description_of_control_panel">
        <header>Description of control panel</header>
        <ol>
          <li class="bold">Programme selector dial</li>
          <p>Pick the right wash program based on the level of dirt, the type of clothing, and the amount of it. This will get better results and make cleaning more effective. When you move the program selector knob to a different place after starting the cleaning program, you will hear a sound, but it won't change the program that was already chosen.</p>
          <li class="bold">Prewash</li>
          <p>The laundry is prewashed before the main wash cycle begins. Use the Pre-wash to achieve excellent washing results without the need to soak the laundry. Pre-wash is recommended when washing heavily soiled laundry. The Prewash function can get an extra wash before main wash.</p>
          <li class="bold">Extra Rinse</li>
          <p>The function is especially useful when washing underwear and also clothes for people with sensitive skin. Select this option to add an extra rinse to wash cycle.</p>
          <li class="bold">No Spin</li>
          <p>The machine will not spin if you choose this function.</p>
          <li class="bold">START/PAUSE button</li>
          <p>Press Start/Pause to start or pause a programme.
            <br> During the washing cycle the corresponding programme phase symbol is flashing.
            <br> In Pause mode, the symbols do not flash and are lit up continuously. The Pause mode can be used to soak the laundry.
            <br> Once the selected programme has started wait for about 10 minutes and then press the Start/Pause button.
            <br> When the laundry is soaked as required, press the Start/Pause button again to resume the programme. Soaking will improve washing results for heavily soiled laundry.
          </p>
        </ol>
      </section>
      <section class="main-section" id="Using_the_appliance">
        <header>Using the appliance</header>
        <ol type="I"> 
          <li>Select Programme</li>
          <p>1. Load the laundry and add Detergent
            <br> 2 Turn the rotary switch to select a program according to the program table.
            <br> 3. Select optional function if needed.
            <br> 4. Press start/pause button.
          </p>
          <li>End of the wash cycle</li>
          <ol>
            <li>Washing machine informs about the end of the program sound signal, flashing LED “Start Pause”.</li>
            <li>Turn off the water valve.</li>
            <li>Switch the machine off.</li>
            <li>Unplug the appliance from the mains.</li>
            <li>Open the door and remove laundry.</li>
          </ol>
          <li>Cancel or modify programme</li>
          <p>Press the On/Off button to interrupt the programme. Then select the desired wash program again and press the Start/Pause button.</p>
        </ol>
      </section>
      <section class="main-section" id="Table_of_programmes">
        <header>Table of programmes</header>
        <div class="table">
          <table>
            <thead>
              <tr class="head_table">
                <td class="left">Programme name</td>
                <td>Маx tеmp[°C]</td>
                <td>Max spin speed[RPM]</td>
                <td>Max load[kg]</td>
              </tr>
            </thead>
            <tbody>
              <tr class="data">
                <th class="left">Cotton</th>
                <td>40°</td>
                <td>1000</td>
                <td>6</td>
              </tr> 
              <tr class="data">
                <th class="left">Synthetic</th>
                <td>40</td>
                <td>1000</td>
                <td>3</td>
              </tr>
              <tr class="data">
                <th class="left">Drum Clean</th>
                <td>90</td>
                <td>400</td>
                <td></td>
              </tr>
              <tr class="data">
                <th class="left">Delicate</th>
                <td>30</td>
                <td>600</td>
                <td>2,5</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
      <section class="main-section" id="Maintenance_and_cleaning">
        <header>Maintenance and cleaning</header>
        <ol type="I">
          <li>Cleaning the pump filter</li>
          <ul>
            <li>Open the service panel</li>
            <li>Unscrew the pump cover</li>
            <li>Remove and clean the filter.</li>
            <li>Close the service panel</li>
          </ul>
          <li>Cleaning the water supply valve</li>
          <ul>
            <li>Turn on the water supply hose</li>
            <li>Use forceps to grasp the filter mesh plunger</li>
            <li>Remove and clean the filter (using a brush)</li>
          </ul>
        </ol>
      </section>
    </main>
  </body>
</html>
/* file: styles.css */
.bold {
    font-weight: bold;
}

header {
    font-size: 30px;
}

nav header{
    text-align: center;
    font-size: 50px;
    margin-bottom: 0.7em;
    margin-top: 0.4em;
}
section {
    color: rgb(50, 50, 50);
}

section > header { 
    color: initial;
  }

tr.data{
    background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
}

tr.data th {
    padding-top: 0.3rem;
    padding-left: 0.5rem;
}

thead > tr > td {
    width: fit-content;
}
.head_table td
{
background-color: black;
    color: white;
    width: fit-content;
}

tr > td{
    text-align: center;
}

.left {
    text-align: left;
}

table {
    border-collapse: collapse;
    border: 0;
    width: 60%;
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1.2rem;
}

tbody th {
      width: calc(100% - 12rem);
}

@media (min-width: 768px) { 
    #navbar{
        position: fixed;
        left: 0;
        top: 0;
        width: 270px;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        border-right: 1px solid black;
    }
    #navbar li {
        list-style-type: none;
        border-top: 1px solid black;
        margin: 10px 0;
        width: 100%;
    }
    nav header{
        font-size: 34px;
    }
    #main-doc {
        margin-left: 300px;
    }
    .nav-link {
        text-decoration: none;
        color: rgb(50, 50, 50);
        font-size: 20px;
    }
    section header:first-of-type {
        margin-top: 1em;
    }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

if you use the browser dev tools to inspect your elements, you will see that you have a padding applied on the ul element which is making it push off from the left edge of the screen. If you set the padding-left: 0 on the ul element, this will take that away.

Wow, I just noticed that. Thank you for your help.

1 Like