Learn Typography by Building a Nutrition Label

HTML-CSS
1

Step 38

Below your .calories-info element, add a div with the class attribute set to divider medium.

2

Hi there and welcome to our community!

Are you having difficulty with this challenge? We will be better able to assist if you can provide some context, show us your code and explain exactly what you are struggling with, including any error messages which you might be seeing.

For future reference, it’s easier to ask for help by clicking the Help button, which appears after you have submitted incorrect code three times. This will create a forum post which automatically includes your full code, a direct link to the challenge and an opportunity for you to describe your issue in detail.

3 
<body>
  <div class="label">
    <header>
      <h1 class="bold">Nutrition Facts</h1>
      <div class="divider"></div>
      <p>8 servings per container</p>
      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
    </header>
    <div class="divider large"></div>
    <div class="calories-info">
      <div class="left-container">
        <div class="divider medium"> </div>
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      <span>230</span>
    </div>

  </div>
</body>
4

Can you please your updated code , So that we will be able to help you !!

Thank You !!

5

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

6

To add an element …

… it would need to come after the closing tag of that element. You have nested it inside the element.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.