Learn Typography by Building a Nutrition Label - Step 43

Tell us what’s happening:
I’ve scrolled through post after post regarding Step 43 and am unable to resolve my issue on my own. This is the hint I’ve received:

You should create a new p element at the end of your .daily-value element.

I cannot figure out where the daily value element is. I’ve added my questions into the editable region for easier identification as to where I am thinking the this new element needs to be added. Thank you for your time.

Your code so far

<!-- file: index.html -->
<!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>

<!-- User Editable Region -->

    <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p> Is it here that I start a p element?
      <div class="divider">
        <p><span><span class="bold">Total Fat</span> 8g</span><span class="bold right">10%</span></p>  Or is it here, at the end, that I  start a new p element?
    </div>

<!-- User Editable Region -->

  </div>
</body>
</html>
/* file: styles.css */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.label {
  border: 2px solid black;
  width: 270px;
  margin: 20px auto;
  padding: 0 7px;
}

header h1 {
  text-align: center;
  margin: -4px 0;
  letter-spacing: 0.15px
}

p {
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
}

.bold {
  font-weight: 800;
}

.large {
  height: 10px;
}

.large, .medium {
  background-color: black;
  border: 0;
}

.medium {
  height: 5px;
}

.small-text {
  font-size: 0.85rem;
}

.calories-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.calories-info h2 {
  margin: 0;
}

.left-container p {
  margin: -5px -2px;
  font-size: 2em;
  font-weight: 700;
}

.calories-info span {
  margin: -7px -2px;
  font-size: 2.4em;
  font-weight: 700;
}

.right {
  justify-content: flex-end;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:109.0) Gecko/20100101 Firefox/115.0

Challenge: Learn Typography by Building a Nutrition Label - Step 43

Link to the challenge:

This is the element they are referring to. Notice the . in front of .daily-value element. This means the element with a class of daily-value

Thank you @partum. Creating a p element after this doesn’t resolve the issue. It seems that creating a new p element is meant to add additional information which I know, after all of my forum searching is to come in a next step.

Just an FYI, I had to copy (and paste) the same code below itself in order to pass the exercise.

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