Technical Documentation page

I’m running into two issues that seem to give everyone else the same problems. I’ve written code that works, now I’m trying to modify it to adhere to the requirements posted…

My two issues are:

  • 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”).

<DOCTYPE html>
    <html>
        <main id="main-doc">
            <head>
                <title>Computer Technical Documentation</title>
                <meta charset="utf-8">
                <meta name="description" content="Building a computer from scratch.">
                <meta name="keywords" content="Computer, Motherboard, CPU, GPU, Hard Drive, Monitor, Case">
                <link rel="stylesheet" href="styles.css" />
            </head>
            <body>
                <fieldset class="header">
                    <header><h1>Computer Documentation</h1></header>
                        <nav id="navbar">
                            <header><ul><h3>Components</h3></header>
                                <li><a href="#cpu" accesskey="c" class="nav-link">CPU</a></li>
                                <li><a href="#cooler" accesskey="o" class="nav-link">CPU_Cooler</a></li>
                                <li><a href="#motherboard" accesskey="m" class="nav-link">Motherboard</a></li>
                                <li><a href="#ram" accesskey="r" class="nav-link">RAM</a></li>
                                <li><a href="#storage" accesskey="s" class="nav-link">Storage</a></li>
                                <li><a href="#gpu" accesskey="g" class="nav-link">GPU</a></li>
                                <li><a href="#case" accesskey="a" class="nav-link"></a>Case</a></li>
                                <li><a href="#power" accesskey="p" class="nav-link">Power_Supply</a></li>
                                <li><a href="#os" accesskey="y" class="nav-link">Operating_System</a></li>
                                <li><a href="#monitor" accesskey="n" class="nav-link">Monitor</a></li>
                                <li><a href="#peripherals" accesskey="h" class="nav-link">Peripherals</a></li>
                            </ul>
                        </nav>    
                </fieldset>
                <fieldset class="main">
                    <section class="main-section" id="cpu">
                        <header id="cpu"><h2 id="cpu"><a href="https://www.cdw.com/content/cdw/en/articles/hardware/how-to-choose-a-cpu.html" target="_blank" alt="How to Choose a CPU">CPU<code> - click here to learn more about CPUs</code></a></h2></header>
                            <p id="cpu">Intel or AMD: Intel has the LGA socket type while AMD has the AM socket set.</p>
                            <p id="cpu">Core Count: Each core is an individual processor.</p>
                            <p id="cpu">Threads: the more threads, the more tasks the CPU can perform.</p>
                            <p id="cpu">Clock rate: Speed at which each individual processor operates. (Ex. a quad core processor at 2.4GHz has 4 2.4GHz processors in one)</p>
                            <p id="cpu">Integrated Graphics: Some CPUs contain graphics proccessing integrated.  this may generate less quality graphics than a separate GPU but is an option for more budget friendly computers.</p>
                            <p id="cpu">Workload:  Are you using this at home, for a small business, is this a gaming computer?</p>
                            <p id="cpu">Type of CPU: Desktop, Mobile, Server</p>  
                        </section>
                    <section class="main-section" id="cooler">
                        <header id="cooler"><h2 id="cooler"><a href="https://techguided.com/how-to-choose-a-cpu-cooler/" target="_blank">CPU_Cooler<code> - click here to learn more about CPU Coolers</code></a></h2></header>
                            <p id="cooler">Socket Type: AM4 and AM5 sockets are for AMD CPUs while Intel has a wide range of sockets including LGA1151, LGA1200, and LGA1700.</p>
                            <ul id="cooler">Cooling Type: 
                                <li>Air Coolers use fans to push air across copper pipes to cool the CPU.</li>
                                <li>AIO (All-In-One) Coolers have a water pump, radiator, and water lines all in one sealed unit.</li>
                                <li>Custom Water Loops come in a variety of configurations but require custom built loops and is a more advanced undertaking.</li>
                            </ul>
                            <p id="cooler">Clearance: Some cases and motherboardsmay be a bit too tight for some larger coolers or some radiators with external fans.</p>
                            <p id="cooler">Budget: cost is another issue, custom water loops can get expensive quickly, some air coolers are very good and are quite inexpensive and some CPUs come with their own coolers.</p>
                            <p id="cooler">Sound Levels: Fan speeds, bearing types, and size of the fans all play a part in the noise level.</p>
                        </section>
                    <section class="main-section" id="motherboard">
                        <header id="motherboard"><h2 id="motherboard"><a href="https://www.newegg.com/insider/how-to-choose-a-motherboard/" target="_blank">Motherboard<code> - click here to learn more about Motherboards</code></a></h2></header>
                            <ul id="motherboard">Form Factor: How big your motherboard is will likely determine the lize of your case and possibly the number of expansion cards.
                                <li>eATX - Largest form factor requiring a much larger case than normal.</li>
                                <li>ATX - Most popular motherboard size.</li>
                                <li>microATX - allowing for a smaller case usually not enough space for full size coolers or GPUs.</li>
                                <li>miniITX - very small board with limited RAM slots and very limited expansion card slots.</li>
                            </ul>
                            <p id="motherboard">Platform: Motherboards can either come in AMD and Intel platforms.</p>
                            <p id="motherboard">Socket Set: Intel socket uses LGA primarily while AMD uses socket AM4 and AM5 primarily.</p>
                            <p id="motherboard">RAM: DDR4 and DDR5 are the two most popular RAM types, DDR4 is currently more common, DDR5 is much faster but currently much more expensive.</p>
                            <p id="motherboard">Storage: SATA ports and M.2 ports are the most popular connections for storage devices, how many are on the board might effact what motherboard you choose.</p>
                            <p id="motherboard">Manufacture: ASUS, MSI, ASRock, Gigabyte, NZXT...some have their die-hard fans, others have absolute haters.</p>
                        </section>
                    <section class="main-section" id="ram">
                        <header id="ram"><h2 id="ram"><a href="https://www.pcworld.com/article/541506/how-to-choose-the-right-ram.html" target="_blank">RAM<code> - click here to learn more about RAM</code></a></h2></header>
                            <p id="ram">Physycal Form Factor: UDIMM, SODIMM, MicroDIMM...What form factor does your motherboard accept?</p>
                            <p id="ram">What type of DDR do you need? Each type encompasses different speeds.</p>
                            <p id="ram">Capacity: the motherboard can accept a certain amount of RAM, 4 sticks of 16GB RAM equals a total of 64GB.</p>
                            <p id="ram">Speed: the motherboard accepts a range of memory speeds.  RAM comes in more speeds than required.</p>
                            <p id="ram">Channels: more channels between your RAM and CPU mean more data transfer between the processor and memory.</p>
                        </section>
                    <section class="main-section" id="storage">
                        <header id="storage"><h2 id="storage"><a href="https://www.newegg.com/insider/hard-drive-buying-guide-choose-the-best-storage-for-desktop-pcs/" target="_blank">Storage<code> - click here to learn more about Storage</code></a></h2></header>
                            <ul id="storage">Three Options - HDD, SDD, M.2:
                                <li>Hard Disk Drive - Spinning magnetic drive usually at 5400rpm, 7200rpm and 10,000rpm</li>
                                <li>Solid State Drive - same capacities as hard disk drives, without spinning magnetic disks, but with much higher data transfer rates.</li>
                                <li>M.2 - a special type of SSD with faster transfer speeds than more traditional SSDs</li>
                            </ul>
                            <p id="storage">Storage Capacity: Capacity can come in a wide range from 1GB-10TB.</p>
                            <p id="storage">Performance: HDDs spin at roughly 7200rpm transferring around 150MB/s, SDDs and M.2 drives transfer upwards of 6Gb/s.</p>
                            <p id="storage">Price: HDDs cost a bit less, SSDs a bit more, and obviously more storage capacity, the higher the cost.</p>
                        </section>
                    <section class="main-section" id="gpu">
                        <header id="gpu"><h2 id="gpu"><a href="https://www.tomshardware.com/reviews/gpu-buying-guide,5844.html" target="_blank">GPU<code> - click here to learn more about GPUs</code></a></h2></header>
                            <p id="gpu">AMD Radeon or Intel Nvidia</p>
                            <p id="gpu">Budget: the graphics card is the second most expensive part of a computer.</p>
                            <p id="gpu">Specs: Memory 2GB-32GB, Form Factor 1-3 fans...single, dual, or triple slot, Power Connectors, Clock Speed, Memory Speed/Bandwidth</p>
                            <p id="gpu">Brand: AS Rock, ASUS, Gigabyte, MSI, XFX</p>
                        </section>
                    <section class="main-section" id="case">
                        <header id="case"><h2 id="case"><a href="https://www.newegg.com/insider/how-to-choose-a-pc-case-in-2019/" target="_blank">Case<code> - click here to learn more about Cases</code></a></h2></header>
                            <p id="case">ATX Full: More internal space for expansion cards, larger power supply, more fans, more storage devices.</p>
                            <p id="case">ATX Mid Towers: Standard sizes for computer cases, adequate area for all computer parts.</p>
                            <p id="case">MiniITX Case: Very small form factor motherboard, limited space for expansion cards and peripherals.</p>
                            <p id="case">Desk Case: Custom case built into a desk, very customizable but prices rise very quickly.</p>
                            <p id="case">Open Air Case: A case with a back plate with or without a cover plate, but the case has no other walls. Air flow is much more prevalent.</p>
                            <p id="case">Dual System Case: One very large case holding two seperate systems (ie. Work computer, Play computer)</p>
                        </section>
                    <section class="main-section" id="power">
                        <header id="power"><h2 id="power"><a href="https://www.gamecrate.com/hardware/how-to-choose-pc-power-supply-buying-guide" target="_blank">Power_Supply<code> - click here to learn more about Power Supplies</code></a></h2></header>
                            <p id="power">Wattage: if your power requirements are 620W your should look for at least a 700W Power Supply, if 690W, look for 750W or 800W.</p>
                            <p id="power">Form Factor: Will your power supply fit in your case.  Maybe your full ATX power supply wont fit in you MiniITX case.</p>
                            <p id="power">Type: ATX, FlexATX, Mini ITX, SFX, TFX</p>
                            <ul id="power"><h4>Modular:</h4>
                                <li>None - all wires connected to the power supply must be either used or hidden. These units are usually less expensive.</li>
                                <li>Semi - Main power connectors are wired straight to the power supply, but extra connectors for Molex, Sata power, and GPU power might be modular depending on your system setup.</li>
                                <li>Full - The entire Power Supply has ports on the back so you can choose to use as many or as little of the possible connectors.</li>
                            </ul>
                        </section>
                    <section class="main-section" id="os">
                        <header id="os"><h2 id="os"><a href="https://www.makeuseof.com/tag/operating-system-choose-next-pc/" target="_blank">Operating_System<code> - click here to learn more about OSs</code></a></h2></header>
                            <p id="os">Windows: The mose familiar OS on the market, great compatibility with other software. Disadvantage is many security issues/target of large amounts of malware.</p>
                            <p id="os">MacOS: Preferred amoung creative professionals, Apple updates more frequently, and is less targeted by malware. Disadvantage is saftware is less compatible, only available on 'Apple' hardware, and units are quite expensive.</p>
                            <p id="os">Linux: Very flexible, Linux is open source meaning it is FREE, and you can change the operating system itself to conform to your requirements.  Disadvantage is the learning curve is VERY steep and can take a long time to learn commands.</p>
                            <p id="os">ChomeOS: Very cheap comparably, update automatically, and sync with google drive and dont require anti-virus. Disadvantages are extremely limited outside usage...Chorme, Chrome apps, and android apps. Thats it!</p>
                            <p id="os">BSD: FREE open source OS can be installed on virtually any computer, lightweight and powerfull. Disadvantages are navigating, using, coding, and programming are for advanced users only, also very limited support.</p>
                            <p id="os">Dual Boot/Virtual Machines: Dual booting OSes may work if you are perfectly happy with Linux, but youre a professional photographer and need adobe lightroom for your business and dont want a second computer.  Virtual machines might solve the same problem if you only need one specific program.</p>
                        </section>
                    <section class="main-section" id="monitor">
                        <header id="monitor"><h2 id="monitor"><a href="https://www.consumerreports.org/electronics-computers/computer-monitors/buying-guide/" target="_blank">Monitor<code> - click here to learn more about Monitors</code></a></h2></header>
                            <p id="monitor">Resolution: 1080p, 2k, 4k, 8k</p>
                            <p id="monitor">Refresh Rate: 60Hz, 90Hz, 120Hz, 144Hz, 240Hz</p>
                            <p id="monitor">Contrast: higher the ratio, the more difference between bright white and deep black.  Higher the ratio, the more vivid the picture.</p>
                            <p id="monitor">Brightness: bright screens work in bright workspaces, dim screens are better for dark rooms.</p>
                            <p id="monitor">Connectors: HDMI, Display Port, DVI, VGA</p>
                            <p id="monitor">Size: 18", 20", 23.5", 27", 31.5", 34", 38", 41"</p>
                            <p id="monitor">Warranty: some come with just one year parts/labor, look for 3 years or more.</p>
                        </section>
                    <section class="main-section" id="peripherals">
                        <header id="peripherals"><h2 id="peripherals"><a href="https://www.hp.com/us-en/shop/tech-takes/which-computer-peripherals-make-best-investments#:~:text=Some%20common%20computer%20peripherals%20include,drives%2C%20and%20media%20card%20readers." targer="_blank">Peripherals<code> - click here to learn more about Peripherals</code></a></h2></header>
                            <p id="peripherals">Speakers: Internal speakers, if any, cant produce all sounds needed for gaming, audio engineering, entertainment.  A good set of speakers along with a sound expansion card can help with that.</p>
                            <p id="peripherals">Webcam: Laptops may come with an integrated webcam but that may not be sufficient for higher quality pictures.</p>
                            <p id="peripherals">Wireless Keyboard/Mouse Combo: A wireless combo set means one point of failure, no more hunting for the correct port.</p>
                            <p id="peripherals">Headphones: Disrupting your neighbors quiet time, invest in a good pair of headphones, on-ear, over-ear, noise-cancelling.</p>
                            <p id="peripherals">Second Monitor: Building a website, editing a photo, editing a video, keeping your email up and ready, reading documentation...a second screen may come in handy.</p>
                        </section>
                </fieldset>

            </body>
        </main>    
    </html>

Been struggling with this for a few weeks. All help is welcome. Im not done with all the CSS I want to do to it, but I need to move on, and will work on all the pictures and hover aspects later.