Learn Typography by Building a Nutrition Label - Step 33

HTML-CSS
1

I cannot get past this question. My browser is submitting different code than what I wrote. I’m putting the p and span elements as they are requested into the code and it will not let me submit.
Here, you can see the code I wrote out:

Screenshot 2023-02-01 at 15-39-09 freeCodeCamp.org
Screenshot 2023-02-01 at 15-39-09 freeCodeCamp.org1228×398 39 KB

Here you can see the code the browser actually submitted below.

So what the hell? I’ve tried Safari, Chrome, and Firefox

You can verify everything here:

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</p>
        <span>230</span>
      </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; rv:109.0) Gecko/20100101 Firefox/109.0

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

Link to the challenge:

2

The 230 is reading as part of the p element in the tests because its in the wrong place.

3

That’s literally incorrect. Edit: Never mind, apologies.

4

I put it on the same line and it gives me the same error. Also, the answer you gave me is irrelevant because the problem is that the browser is modifying the code in a way that removes multiple divs.

5

Try this:
Move the span with the 230 a couple of lines down so it is after the closing div of the .left-container.

6

The answer I gave you is highly relevant.

Your span is in the wrong place. It needs to be after the .left-container div. It is currently inside the .left-container div.

7

The span element needs to be within the left-container div. If taken out, it throws up another error. The exact error is as follows: “… Hint: Your p element should have the text Calories.”
Screen Shot 2023-02-01 at 3.59.15 PM

8

Oh. I’m sorry. Thank you. I was wrong. Also apparently only Chrome was modifying the code.

9
11

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.

12

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