Learn Typography by Building a Nutrition Label - Step 33

HTML-CSS
1

Tell us what’s happening:

The task was: 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 .

The hint says: You should have a new span element within your .calories-info element.

Your code so far

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

I have the span element added but I am not sure if i have it written wrong.

``` 
/* 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/120.0.0.0 Safari/537.36

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 33

1 Like
2

Also below the .left-container element,
create a new span element with the text 230 .

<span>text</span>
2 Likes
3

@zaklina right on the money with that one. @sanskritik521 Remember opening tags and closing tags with content in between.

1 Like
4

thank you @zaklina
but i don’t think that worked

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

it still says: Your span element should come after your .left-container element.

1 Like
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 (').

1 Like
6

You placed the closing div in the wrong place.
That is why you are not passing the tests.

The close div goes after the opening one here

1 Like
7

That worked! i was under the impression that the content is in that


Thank you!

1 Like
8

I had this issue today, I also reset few times so if u guys struggling don’t give up just move your div closing tag to .left-container :wink:

mod edit: removed solution

9

@Ralph.io

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.