Build a Bookstore Page - Step 18

HTML-CSS
1

Tell us what’s happening:

I am facing an issue with the lab test related to adding the paragraph element below the .card-container.

I have correctly placed the element outside and below the .card-container and used the exact required text:
“Review your selections and continue to checkout.”

Despite this, the test continues to fail and repeatedly shows an error related to this text. I have verified that there are no extra spaces, typos, or structural issues in my code.

It seems like the test might not be recognizing

Your code so far

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>XYZ Bookstore Page</title>
</head>

<body>


<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
  <div class="card" id="sally-adventure-book">
    <h2>Sally's SciFi Adventure</h2>
    <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
    <button class="btn">Buy Now</button>
  </div>
  <div class="card" id="dave-cooking-book">
    <h2>Dave's Cooking Adventure</h2>
    <p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>
    <button class="btn">Buy Now</button>


  <div class="card-container"></div>
  <p>Review your selections and continue to checkout.</P>
    
  <div class="btn-container"></div>
  </div>

</body>

</html>

<!-- User Editable Region -->

Your browser information:

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

Challenge Information:

Build a Bookstore Page - Step 18

2

hi and welcome to the forum.

Here’s my tips on getting this one done correctly.

1- click the Reset button to reset the step to its original code. This code should look like below:

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>XYZ Bookstore Page</title>
</head>

<body>
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
  
  <div class="card-container">
    <div class="card" id="sally-adventure-book">
      <h2>Sally's SciFi Adventure</h2>
      <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
      <button class="btn">Buy Now</button>
    </div>
    
    <div class="card" id="dave-cooking-book">
      <h2>Dave's Cooking Adventure</h2>
      <p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>
      <button class="btn">Buy Now</button>
    </div>
  </div>
  
  
</body>

</html>

2- look at the editor area and find the blank highlighted line. (it is shown on the line number 25)
Type your new code into that line.
3- Start by adding the new paragraph element on that blank line.
4- below your new p element, add a new div element.

Confirm your new code is exactly 2 lines. One paragraph element, followed by one div element.

3

Below the element with the class card-container , add a new p element with this text:

The instructions ask you to add the new code below the .card-container element. Remember, that a complete HTML element includes both an opening tag and closing tag. So, your new code needs to be added after the closing tag of that element.

You added your code inside the .card-container element.