I am trying to follow these instructions:
Below the element with the class card-container, add a new p element with this text:
Example Code
Review your selections and continue to checkout.
Below the p element, create a div element with the class attribute set to btn-container. This container will group your navigation button elements.
I have tried to place the p element in various places but I keep getting the message that it should be below the element containing “class-container”.
Your code so far
<!-- User Editable Region -->
<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>
<p>Review your selections and continue to checkout.</p>
<div class="button-container">
</div>
<!-- User Editable Region -->
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/17.6 Safari/605.1.15
If I understand correctly the problem is with the place where you added the new element. To complete Step 15 you should add two elements on the very end of the code: the first - P with the text “Review your selections and continue to checkout.“ and the second - DIV with class=“btn-container” right after this P
Thanks for the reply, but I think that’s what I have already. I noticed that you wrote class=“btn-container” rather than class=“button-container” as I had written so I changed that. But the code still failed. Please let me know if you have any other ideas, or whether I misinterpreted your advice.
You should have a </div> to close off the <div class="card-container"> . So there should be two </div>'s above your newly typed <p> , one for <div class="card-container"> and another for <div class="card" id="dave-cooking-book"> which you already have.
The new <p> should not be inside a div. So remove the <div> , the one above the <p>Review your selections and continue to checkout.</p>.
I reset and included your ending (I think), but I’ve had no success. Here is my code, and thank you for your patience.
<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>
<p>Review your selections and continue to checkout.</p>
<div class="btn-container"></div>
The code lost closing </div> tag for <div class="card-container">.
<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>
It should be here!
<p>Review your selections and continue to checkout.</p>
<div class="btn-container"></div>
I think you accidentally deleted it when you started editing the code