Learn Typography by Building a Nutrition Label - Step 33

Tell us what’s happening:
The error message I keep getting is that I don’t have a p element that says “Calories” when I think I do

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>

<!-- User Editable Region -->

    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
         <p>Calories<span>230</span></p>
      </div>
    </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;
}

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

.calories-info h2 {
  margin: 0;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Please create your own topics for your own questions. I have moved this into a separate topic. Thanks

Here was the code you used:

    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
         <p>Calories<span>230</span></p>
      </div>
    </div>

And here are the instructions for ref:

Below your .small-text element, create a new p element with the text Calories . Also below the .left-container element, create a new span element with the text 230 .

If I split up the text of the instructions into steps, then check your code to see if you followed them, the results would be:

1- below your .small-text element, create a new p element :white_check_mark:
2- …with the text Calories :white_check_mark:
3- Also below the .left-container element, create a new span :x:
4- with the text 230

so you’re saying to create the span element separately from the

element and put that under the .left-container?

yup!!! :confetti_ball: :confetti_ball: :confetti_ball: :confetti_ball: :confetti_ball: :confetti_ball: :confetti_ball: :confetti_ball:

I’m so sorry, but I’m still an error message that my p element should come after your .small-text element. I even tried putting the ‘p’ element on its own after the first div element

This is the code I have right now:

<!-- 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>

<!-- User Editable Region -->

  <div class="calories-info">
      <div class="left-container"> 
   <span>230</span>
  <h2 class="bold small-text">Amount per serving</h2>
  
</div>  
<p> Calories </p>
</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;
}

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

.calories-info h2 {
  margin: 0;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
[/quote]

230

Amount per serving

Calories

It looks like I only have “Calories” in the p element. Am I missing something else here? And is the span element not in the right place?

<div class="calories-info">
      <div class="left-container"> 
   <span>230</span>
  <h2 class="bold small-text">Amount per serving</h2>
  
</div>  
<p> Calories </p>
</div>

how are my p and span elements not below the .small-text and .left-container elements, respectively? To me it looks like they are below the instructed elements.

I didn’t see your question until now. Is the .small-text element a selector?

My brain is pretty fried atm but is it a div element?

i think it’s an h2 element

okay I just did that. Still stuck on the span though-you said in an earlier comment that I’m currently nesting it in the .left-container element. it should still precede the h2 element though? sorry i’m super duper new to coding and following the instructions is still a learning curve for me

yeah I’m not sure why this step is SO mind boggling. BUT I JUST DID IT!!

1 Like

I definitely need to come back and review this again. You’re right that it shouldn’t have taken so much time for it to click. Also thank you thank you for your patience

1 Like

This code will pass.
Mod edit: removed solution

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like