Stuck on step in Learn Typography exercise

After your last .divider element, create a p element and give it the text Total Fat 8g 10% . Wrap the text Total Fat in a span element with the class of bold . Wrap the text 10% in another span element with the class of bold . Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment.

p> span> span class=“bold”> Total Fat /span> 8g /span> span class=“bold”> 10% /span> /p>

(I removed the < from each element so the code would show up)
What am I missing here? I entered the text, added a span element for Total Fat,
a span element for 10%, then wrapped the Total Fat span element in another one.

You’ll need to at least tell us the step number you are on, but a link to the step would be even better.

Also, you need to use the triple backtick method to paste your code in here properly so we can see it. And please paste all of your HTML in here.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

Step 43

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
  <link href="./styles.css" rel="stylesheet">
</head>

<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">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      <span>230</span>
    </div>
    <div class="divider medium"></div>
    <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="divider"></div>
      <p><span><span class="bold">Total Fat</span>8g</span><span class="bold">10%</span></p>
    </div>
  </div>
</body>
</html>

Look at what you added in the HTML preview pane. Do you see how Total Fat and 8g are right next to each other with no spacing? I’m guessing there should be at least a space between those.

1 Like

Yeah that was the solution, thanks.

1 Like

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