Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
Hello I need some help, I keep getting the error “You should have the same number of .nav-link and .main-section elements” but I do have the same number of those elements. Please help me, I’m stuck. Thank you.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Dab's Cookbook</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <nav id="navbar">
            <header>
                <h1>Menu</h1>
            </header>
            <ul class="food-list">
                <li><a class="nav-link" href="#Puttanesca">Puttanesca</a></li>
                <li><a class="nav-link" href="#Potato_Bubbles">Potato Bubbles</a></li>
                <li><a class="nav-link" href="#Steak_Au_Poivre">Steak Au Poivre</a></li>
                <li><a class="nav-link" href="#Spaghetti_alle_vongole_rosso">Spaghetti alle vongole rosso</a></li>
                <li><a class="nav-link" href="#Paella_Negra">Paella Negra</a></li>
                <li><a class="nav-link" href="#Pork_Sisig">Pork Sisig</a></li>
                <li><a class="nav-link" href="#Siu_Mai">Siu Mai</a></li>
                <li><a class="nav-link" href="#Dab's_Kinilaw">Dab's Kinilaw</li>
                <li><a class="nav-link" href="#Tiramisu">Tiramisu</a></li>
                <li><a class="nav-link" href="#Cheesecake">Cheesecake</a></li>
            </ul>
        </nav>
        <main id="main-doc">
           <section class="main-section" id="Puttanesca">
                <header>
                    <h2>Puttanesca</h2>
                    <img src="puttanesca.jpg" />
                </header>
                <article>
                    <h3>Ingredients:</h3>
                    <p>4 Servings</p>
                    <ul> 
                        <li>800g San Marzano whole peeled tomatoes</li>
                        <li>400g Spaghetti</li>
                        <li>2 cloves Garlic</li>
                        <li>200g Black olives</li>
                        <li>200g Capers</li>
                        <li>100g Basil</li>
                        <li>Olive oil</li>
                        <li>Salt (to taste)</li>
                        <li>4 fillets Anchovies</li>
                        <li>Parmesan cheese</li>
                        <li>Chili Flakes (optional)</li>
                    </ul>
                    <h3>Steps</h3>
                    <ol>
                        <li>Place garlic and chili flakes in a cold pan with some olive oil tehn turnon the heat to infuse the flavor of the garlic into the sauce.</li>
                        <li>Once the garlic is almost done (you can tell because the edges of the garlic turns slightly golden brown), add the anchovies. Don't worry, the anchovies melt into the sauce and adds a salty umami taste to the whole dish.</li>
                        <li>Once the edges of the garlic is slightly golden brown, add the canned whole peeled tomatoes to stop further cooking of the garlic. At this point wait unitl your sauce starts to bubble, and when it does lower the heat to the lowest setting because tomato-based sauces tend to burn fast.</li>
                        <li>Add half of your basil, and save the rest for garnish for later.</li>
                        <li>Add all of your capers and black olives into the sauce and simmer until the sauce is done (which can take anywhere between 30 minutes to 1 hour depending how much time you have).</li>
                        <li>When your sauce is 10 minutes away from being fully cooked, heat a pot of water to a rolling boil and cook your pasta until it's al dente.</li>
                        <li>Once your pasta is al dente, add your pasta to your sauce until your pasta is fully cooked.</li>
                        <li>Put in a serving dish and top it with your remaining basil leaves and some parmesan cheese and enjoy!</li>
                    </ol>
                    <code>Tip: Save some of your pasta water to add to your sauce to better emulsify your sauce.</code>
                </article>
           </section>
           <div class="border"></div>
           <section class="main-section" id="Potato_Bubbles">
            <header>
                <h2>Potato Bubbles</h2>
                <img src="potato_bubbles.jpg" />
            </header>
            <article>
                <h3>Ingredients:</h3>
                <p>2 Servings</p>
                <ul>
                    <li>3 large potatoes</li>
                    <li>2 tbsp glutinous rice flour</li>
                    <li>1 tbsp cornstarch</li>
                    <li>1/3 tsp salt</li>
                    <li>1/3 tsp pepper</li>
                    <li>oil</li>
                    <li>Chili powder</li>
                    <li>Ketchup</li>
                </ul>
                <h3>Steps</h3>
                <ol>
                    <li>Boil the potatoes with it's skin on to prevent water from entering the potates, and cook them until they're fork tender.</li>
                    <li>Get a large bowl and mash the potatoes. You can use a potato ricer if you want your potates to be smoother.</li>
                    <li>Once all of it is mashed, combine the glutinous rice flour, cornstarch, chili powder, salt and pepper with the potatoes until it looks like a ball of dough.</li>
                    <li>Cut your dough into half and shape each half into a log.</li>
                    <li>Once it has been shaped into a log, cut into even pieces, and press each piece down with a fork to create a crunchier exterior.</li>
                    <li>Heat your oil unitl it is 350 degrees Farenheit, and fry your potatoes until it is golden brown.</li>
                    <li>Place on a paper towel to drain any excess oil, and serve with a side of ketchup.</li>
                </ol>
                <code>Tip: Always keep track of oil temperature!</code>
            </article>
           </section>
           <div class="border"></div>
           <section class="main-section" id="Steak_Au_Poivre">
            <header>
                <h2>Steak Au Poivre</h2>
                <img src="steak.png" />
            </header>
                <h3>Ingredients:</h3>
                <p>2 Servings</p>
                <ul>
                    <li>2 tbsp unsalted butter</li>
                    <li>8 ounces beef tenderloin (filet mignon) steaks</li>
                    <li>2 tsp Kosher salt</li>
                    <li>1 tbsp whole black peppercorns, crushed coarsely</li>
                    <li>60g Cognac</li>
                    <li>238g heavy cream</li>
                </ul>
                <h3>Steps</h3>
                <ol>
                    <li>Preheat oven to 450 degrees.</li>
                    <li>Add butter to a small cast iron skillet (just bigger than your steaks) on high heat.</li>
                    <li>Season steaks all over with salt and pepper, pressing the pepper into the steaks to help it stick.</li>
                    <li>Reserve any pepper that doesn't stick.</li>
                    <li>Sear the steaks on each side for 3 minutes until browned, then place in oven for 4 minutes for rare, 5-6 minutes for medium, or more for well done.</li>
                    <li>Remove from the oven and remove steaks from the pan to a plate you cover with foil to let steaks rest.</li>
                    <li>Add the cognac to the pan, stir well and then with a long lighter (like those you'd use for a fireplace), ignite the cognac and let it cook for about 15 seconds until the flames extinguish themselves.</li>
                    <li>Stir well then add in the heavy cream and remaining peppercorns that you reserved (if you had any).</li>
                    <li>Bring to a boil and stir well until thickened enough to pour like a sauce instead of a soup, about 5-6 minutes.</li>
                    <li>Serve over rested steaks.</li>
                </ol>
                <code>Tip: Resting the steaks keeps the steaks nice and juicy.</code>
           </section>
           <div class="border"></div>
           <section class="main-section" id="Spaghetti_alle_vongole_rosso">
            <header>
                <h2>Spaghetti alle vongole rosso</h2>
                <img src="vongole.jpg" />
            </header>
            <h3>Ingredients:</h3>
            <p>2 Servings</p>
            <ul>
                <li>200g spaghetti</li>
                <li>700g clams</li>
                <li>1 garlic clove</li>
                <li>50 ml tomato sauce</li>
                <li>basil or parsley</li>
                <li>pepper, to taste</li>
                <li>olive oil</li>
            </ul>
            <h3>Steps</h3>
            <ol>
                <li>Clean the clams, wash them under water, then place them in a large pan and cover with a lid. Cook over medium heat until they open.</li>
                <li>Once all have opened, turn the heat off and remove the meat from the shell. Filter the clam stock.</li>
                <li>Next, sauté the garlic in olive oil, then add the tomato sauce, and filtered clam stock. Cook for a few minutes over low heat, then add the clam meat and remove from the heat.</li>
                <li>Cook the spaghetti in salted water, then 2 minutes near the end of cooking transfer them into the pan with clam meat and stir. Add a little olive oil and pasta water and stir once again.</li>
                <li>Add basil or chopped parsley. Plate the pasta, sprinkle with pepper, and serve immediately.</li>
            </ol>
            <code>Tip: Tap the clams before cooking them to see if they're still alive.</code>
           </section>
           <div class="border"></div>
           <section class="main-section" id="Paella_Negra">
            <header>
                <h2>Paella Negra</h2>
                <img src="paella.jpg" />
            </header>
            <h3>Ingredients:</h3>
            <p>6 Servings</p>
            <ul>
                <li>1 cup bottle clam juice</li>
                <li>2 Tbsp squid ink</li>
                <li>1 cup water</li>
                <li>1/4 cup cooking oil</li>
                <li>1/2 tsp sweet smoked paprika</li>
                <li>Pinch of salt</li>
                <li>1 lb mussels rinsed well</li>
                <li>1 3/4 cups Spanish rice or short-grain rice</li>
                <li>1 Tbsp cooking oil to sear the scallops</li>
                <li>12 large scallops pat dry</li>
                <li>1 large lemon</li>
            </ul>
            <h4>Sofrito:</h4>
            <ul>
                <li>1 small onion peeled</li>
                <li>1 large tomato</li>
                <li>8 cloves garlic peeled</li>
                <li>1 large red bell pepper seeded</li>
                <li>1 bunch cilantro leaves</li>
            </ul>
            <h3>Steps</h3>
            <ol>
                <li>Place the clam juice, water and squid ink in a small sauce pan. Bring to a gentle boil and then lower the heat to let it cook for another 1 minute. Remove from the heat and set aside</li>
                <li>Place the ingredient for sofrito in a food processor and process until smooth. Preheat a large paella pan or if you don't have one like me, I just use cast-iron skillet. Add in cooking oil. Add in the sofrito and cook for about 5 minutes. Add in the smoked paprika, pinch of salt. Add in the rice and stir to combine. Add in the clam and squid ink broth into the pan. Spread the rice evenly on the surface of the pan. Bring the broth to a boil and then lower the heat to maintain a gentle steady simmer. The rice will gradually absorbs the broth and try not to disturb the rice while cooking, this will take about 10 minutes or so. Arrange the mussels pieces on top of the rice and let them cook again for another 5 minutes. If the rice is cooked but the mussels are still not cooked through, cover the pan with aluminum foil and lower the heat and let it continue to cook until the mussels are cooked through. The cooked mussels will open up and discard the ones that aren't.</li>
                <li>While the paella is cooking, preheat another non-stick pan with 1 Tbsp of oil. When the pan is hot enough, gently place the scallops about 1 inch apart, season with a bit of salt and let them sear about 2-3 minutes on each sides. Remove from the pan and arrange on top of the cooked paella. At this point, the rice should be cooked through and the rice at the bottom of the pan should have some short of caramelization or stickiness to the pan. Remove from the heat and cover with the aluminum foil for 5 minutes before serving. Add some fresh cilantro leaves and fresh diced tomatoes for color contrast. Serve with lemon wedges</li>
            </ol>
            <code>Since the whole presentation of the dish is "dark" in color, I like to add fresh bright colors like cilantro leaves and fresh diced tomatoes for that color contrast and It helps to see the black rice better too.</code>
           </section>
           <div class="border"></div>
           <section class="main-section" id="Pork_Sisig">
            <header>
                <h2>Pork Sisig</h2>
                <img src="sisig.jpg" />
            </header>
            <h3>Ingredients:</h3>
            <p>2 Servings</p>
            <ul>
                <li>6 pieces (or 400g) pork cheeks</li>
                <li>400g pork belly</li>
                <li>1 cup coconut vinegar</li>
                <li>3 bay leaves</li>
                <li>1/2 tsp salt</li>
                <li>1/2 tsp pepper</li>
                <li>Water</li>
                <li>4 tbsp soy sauce</li>
                <li>3 tbsp coconut vinegar</li>
                <li>2 tbsp butter</li>
                <li>2 tbsp oil</li>
                <li>1 thumb sized ginger (minced)</li>
                <li>6 cloves of garlic</li>
                <li>4 tbsp mayonnaise</li>
                <li>1/2 red onion (diced)</li>
                <li>2 cups pork crackling (chopped)</li>
                <li>4 birds eye chillies (sliced)</li>
                <li>1 egg</li>
                <li>2 - 3 calamansi</li>
            </ul>
            <h3>Steps</h3>
            <ol>
                <li> Place pork cheeks and belly in a small pot with the 1 cup vinegar, bay leaves, salt and pepper. Add enough water to just cover and boil for 20 minutes. Drain liquid and set pork aside to cool. You could do this step the night before too, if you want.</li>
                <li>Heat up a grill pan on the stove and grill the pork pieces on all sides until charred and crispy (approx. 20 minutes). Can do this step on an outdoor BBQ if you have one.</li>
                <li>Remove pork from grill and dice finely. Mixed diced pork in a bowl with soy sauce, 3 tbsp vinegar and butter. </li>
                <li>Heat up a pan and add the oil. Saute the ginger and garlic until fragrant. Stir in the diced pork mixture. Allow pork to crisp up before stirring/turning to cook the other side till crisp too. Stir in the mayonnaise.</li>
                <li>Heat up a hot plate, if using. Once hot, add the pork onto the plate. Sprinkle with onion, pork crackling and chillies. Make some room in the middle of the plate and add the egg. Serve with calamansi (or substitute). Complete this step directly in the pan if you're not using the hot plate. Eat immediately with steamed rice.</li>
            </ol>
            <code>Tip: Serve this with an ice cold bottle of San Miguel Red horse.</code>
           </section>
           <div class="border"></div>
           <section class="main-section" id="Siu_Mai">
            <header>
                <h2>Siu Mai</h2>
            </header>
            <img src="siu_mai.jpg" />
            <h3>Ingredients:</h3>
            <p>32 pieces</p>
            <h4>Filling:</h4>
            <ul>
                <li>250g Deshelled Shrimp</li>
                <li>Baking Soda Marinade - 1/2 tsp salt and 1/4 tsp baking soda</li>
                <li>Pork, 335g lean and 125g fat.</li>
                <li>Jianshui substitute - 1/4 tsp baking soda mixed with 3/4 tsp water.</li>
                <li>10g Salt</li>
                <li>6 Dried shitake mushrooms</li>
                <li>Seasoning for Siumai - 1.5 tbsp sugar, ½ tbsp chicken bouillon </li>
                <li>40g Lard</li>
                <li>Carrot, thinly sliced</li>
                <li>Roe optional</li>
            </ul>
            <h4>Wrappers:</h4>
            <ul>
                <li>250g All purpose flour</li>
                <li>1/2 tsp Salt</li>
                <li>1 1/2 Medium-sized eggs</li>
                <li>50g Water</li>
                <li>Egg yellow, 2 drops, mixed in with the water</li>
            </ul>
            <h3>Steps</h3>
            <ol>
                <li>If using, lay out eight carrot slices in a bamboo steamer. Again, you don't need to steam these on thinly sliced carrot - the carrot's not (generally) eaten so you could also use parchment paper. Now, we're using a bamboo steamer set-up: you could use whatever sort of steaming set-up you like, but the important bit is just to make sure that the steam can circulate under the Siumai from the bottom. So you could use a steaming tray (with some creativity), but don't do it on a plate.</li>
                <li>Grab roughly a heaping tablespoon of filling per Siumai, folding the wrapper up around the sides of the filling. Ok, so wrapping Siumai really isn't rocket science or anything… but the standard procedure is to make a sort of ring/'ok sign' with your thumb and index finger, put the Siumai wrapper on your 'ring' and press the filling down into the wrapper. Make it even – the important bit is to make sure the filling comes up to the very top of your wrapper, as any portion of the wrapper that's above the filling'll dry out during steaming.</li>
                <li>Place the extra shrimp and a small spoonful of roe on the Siumai. Be sure to slightly press the shrimp down into the filling, you don't want it just lying on top. In the video a couple of our shrimp weren't totally integrated, which makes the Siumai slightly less attractive.</li>
                <li>Steam the Siumai for ten minutes. The water should be at a rolling boil when steaming. Cover both the steamer (obviously) and the wok while steaming.</li>
                <li>Serve immediately. We discovered over Thanksgiving that these aren't really a potluck dish (they'll slightly dry out). Serve soon after steaming.</li>
            </ol>
            <code>Tip: If you'r feeling lazy, you can use store-bought wanton wrappers.</code>
           </section>
           <div class="border"></div>
           <section class="main-section" id="Dab's_Kinilaw">
            <header>
                <h2>Dab's Kinilaw</h2>
                <img src="kinilaw.jpg" />
            </header>
            <h3>Ingredients:</h3>
            <p>2 Servings</p>
            <ul>
                <li>400g Malasugi or Tangigue fillets</li>
                <li>1 cup coconut vinegar</li>
                <li>1/2 cup coconut cream</li>
                <li>50g pickled ginger</li>
                <li>10g Sugar</li>
                <li>2 calamansi</li>
                <li>Chili infused oil</li>
                <li>Lemongrass finely chopped</li>
                <li>Fish sauce to taste</li>
            </ul>
            <h3>Steps</h3>
            <ol>
                <li>Marinate the fish fillets in the coconut vinegar for 30 minutes to clean the fish and drain afterwards.</li>
                <li>Place fish in a bowl and combine with coconut cream, sugar, calamansi, pickled ginger, lemon grass and fish sauce.</li>
                <li>Drizzle with the chili infused oil when serving, and garnish with some green onion and enjoy.</li>
            </ol>
            <code>Tip: Drink this with a can of soft drinks to cook the fish in your stomach.</code>
           </section>
           <div class="border"></div>
           <section class="main-section" id="Tiramisu">
            <header>
                <h2>Tiramisu</h2>
                <img src="tiramisu.jpg" />
            </header>
            <h3>Ingredients:</h3>
            <p>12 Servings</p>
            <ul>
                <li>3 large egg yolks, cold</li>
                <li>120 g unpacked powdered sugar, sifted</li>
                <li>500 g full-fat mascarpone, cold</li>
                <li>27-36 Italian ladyfingers (hard ones)</li>
                <li>120 ml cooled brewed espresso or strong coffee</li>
                <li>11 g unsweetened cocoa powder</li>
            </ul>
            <h3>Steps</h3>
            <ol>
                <li>In a large bowl, using an electric mixer fitted with a whisk attachment, beat the egg yolks and powdered sugar on medium-high speed until creamy and the sugar is completely dissolved, 2 to 3 minutes.</li>
                <li>Add the mascarpone and mix on medium speed just until smooth and creamy, about 1 minute.</li>
                <li>Quickly dip both sides of the ladyfingers into the coffee, 1 to 2 seconds per side, and arrange 9 to 12 ladyfingers on the bottom of a 9 x 7 x 3-inch (23 x 18 x 8 cm) or 8 x 8 x 3-inch (20 x 20 x 8 cm) casserole dish. The necessary amount of ladyfingers will depend on the size of the ladyfingers as well as that of the casserole dish. The required amount of coffee depends on how long you dip the ladyfingers and how much they soak up. I don't recommend soaking the ladyfingers for too long; otherwise, the Tiramisu will end up very watery.</li>
                <li>Spread about one-third of the mascarpone cream on top of the ladyfingers. Repeat twice more, so that the Tiramisu is assembled as follows from bottom to top: ladyfingers + cream, ladyfingers + cream, ladyfingers + cream.</li>
                <li>Wrap the casserole dish tightly with plastic wrap so that no air or odors from the fridge can get inside the tiramisu. Refrigerate overnight for about 8-12 hours. Before serving, dust the top lightly with cocoa powder. Store in the fridge for up to 3 days.</li>
            </ol>
            <code>Do not use fresh lady fingers, the end result won't be as delicious.</code>
           </section>
           <div class="border"></div>
           <section class="main-section" id="Cheesecake">
            <header>
                <h2>Cheesecake</h2>
                <img src="cheesecake.jpg" />
            </header>
            <h3>Ingredients:</h3>
            <p>16 Slices</p>
            <h4>Crust</h4>
            <ul>
                <li>3 cup digestive crumbs (300 g)</li>
                <li>1/2 cup unsalted butter (113 g), melted</li>
            </ul>
            <h4>Cheese Filling</h4>
            <ul>
                <li>16 oz full fat cream cheese (450 g), room temperature</li>
                <li>1 1/4 cup sour cream (285 g), room temperature</li>
                <li>3/4 cup sugar (150 g)</li>
                <li>3 tbsp all purpose flour (24 g)</li>
                <li>1 1/2 tbsp lemon juice</li>
                <li>1 tsp vanilla extract</li>
                <li>3 large eggs , room temperature</li>
            </ul>
            <h4>Topping</h4>
            <ul>
                <li>some berries of choice</li>
                <li>some powdered sugar</li>
            </ul>
            <h3>Steps</h3>
            <h4>Crust</h4>
            <ol>
                <li>Place digestive biscuits into a food processor and blend until you have a fine texture. Pour into a bowl together with butter and mix well.</li>
                <li>Pour into a 7 inch (18 cm) springform pan and using your fingers, start pressing the mixture against the pan's wall all the way up to the brim. Then do the base by pressing the mixture to the bottom of the pan. Place in the freezer for 30 minutes.</li>
                <li>Optional: Use a small knife to scape gently all around the wall to make it even.</li>
                <li>Note: You might have balance of crust mixture, depending on your preferred crust thickness</li>
            </ol>
            <h4>Cheese Filling</h4>
            <ol>
                <li>Add cream cheese into a bowl and using a handheld whisk at lowest speed, whisk it just until creamy. Now add in sour cream, sugar, vanilla extract, flour and lemon juice. Mix until everything is well combined and set aside.</li>
                <li>Crack the eggs into another bowl and lightly whisk them. Now pour into the cheese mixture and fold everything together using a spatula. Pour mixture into our prepared pan and spread evenly using an offset spatula.</li>
                <li>Bake in a preheated oven (no fan) at 285ºF (140ºC) for 1 hour 45 minutes or until you see the surrounding of the cheesecake has set but the center still wiggles a bit when you gently shake the pan.</li>
                <li>Remove from the oven and leave it cool completely. Then chill in the fridge for min 8 hours.</li>
            </ol>
            <h4>How to remove cheesecake from the pan</h4>
            <ol>
                <li>This is how I do it with all my cheesecakes. Take out cheesecake from the fridge. Remove the springform. Insert a small knife underneath the cheesecake crust and gently move it all around to help loosen the cheesecake from the pan. Using the same knife, lift the cheesecake a bit and insert a flat spatula underneath. Do the same in the opposite direction.</li>
                <li>Holding both spatulas, swiftly and confidently transfer the cheesecake to a serving plate.</li>
            </ol>
            <h4>Serving</h4>
            <ol>
                <li>Place some berries on top and lightly dust with powdered sugar. Slice and serve!</li>
            </ol>
            <code>Tip: Use portable oven thermometer for a more precise temperature reading</code>
           </section>
        </main>
    </body>
</html>

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

do you have any css code? Please share it as sometimes that can affect the test in unexpected ways.

:not(code) {
font-family:‘Gill Sans’, ‘Gill Sans MT’, Calibri, ‘Trebuchet MS’, sans-serif;
}

body {
display: flex;
overflow: hidden;
}

a {
display: block;
text-decoration: none;
color: black;
padding: 20px;
}

#navbar {
display: block;
margin: 5px;
padding: 5px;
width: 20vw;
height: 100vh;
min-width: 200px;
}

#navbar header {
text-align: center;
}

.food-list {
list-style-type: none;
margin: 0;
padding: 0;
}

.food-list li {
border: 2px solid black;
}

#main-doc {
display: block;
width: 80vw;
height: 100vh;
margin: 10px;
padding: 10px;
overflow: auto;
}

img {
display: flex;
width: 400px;
height: 300px;
margin: auto;
}

.main-section {
padding: 15px;
margin: 15px;
text-align: justify;
}

.main-section h2, h3, h4 {
margin: 20px;
}

.main-section h3, h4 {
font-style: italic;
}

.main-section h2 {
font-family:Impact, Haettenschweiler, ‘Arial Narrow Bold’, sans-serif;
}

.main-section p {
text-indent: 30px;
font-style: italic;
}

.main-section ul li {
padding: 5px;
margin: 5px;
}

.main-section ol li {
padding: 5px;
margin: 5px;
}

.border {
background-color: black;
border: 2px solid black;
}

@media only screen and (max-width: 670px) {
body {
display: block;
}

#navbar {
    width: 100vw;
    height: 20vh;
    overflow: scroll;
}

#main-doc {
    width: 100vw;
    height: 80vh;
}

}

in the sample website here https://technical-documentation-page.freecodecamp.rocks/
the titles are all inside the <header></header> blocks directly
But in your case they are all inside nested <h2> elements within the header.
I’m not sure if that is a possible reason for the issue. (just a thought at this moment)

I have removed all h2 elements but still the same error still pops up :confused: but thank you tho!

I put the code into an online HTML validator and it found some issues including this missing anchor closing tag:

  1. <li><a class="nav-link" href="#Dab's_Kinilaw">Dab's Kinilaw</li>
  2. <li><a class="nav-link" href="#Tiramisu">Tiramisu</a></li>

Once I fixed it, this issue went away.
If you want to see what other errors there were, put your code into the validator
here The W3C Markup Validation Service

1 Like

OMG Thank you so much! You are a lifesaver!