Learn Typography by Building a Nutrition Label - Step 38

HTML-CSS
1

This is my first time posting on the site, so hello to everyone! I’m so thankful to have this community, so I greatly appreciate any support with this problem in advance :slight_smile:

So, I’ve been stuck on this problem for an hour and just can’t seem to get past it. I added the “divide med” div at the end, and I can’t seem to understand why it’s giving me the error of : " You should create a new div within your .label element."

Thanks again for the input!

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>

<!-- User Editable Region -->

      <p>Calories</p>
     <span class="right">230</span>
    </div>
    <div class="divide medium"></div>
  </div>
</div>

<!-- User Editable Region -->

</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 {
  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;
}

Your browser information:

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

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

Link to the challenge:

2

Hello! Welcome to the forum. Greatest place for seeking help and for helping others, in my humble opinion. :slight_smile:
I suggest you reset the task, and just enter the information you entered on the line that is open for it. This line is below the .calories-info.
When I look at the code, it appears the div that has been added is within other div as there are two more closing after it.
If you look right below the Step 38 instructions, there is a blank line to enter the div class “divide medium” on.
It looks like the code is correct, just located outside of the requested area.
Hope this helps.

1 Like
3

Yes, thank you! I ended up starting fresh on the code last night and realized I had placed some elements in weird spots. Thank you again! :smiley:

1 Like
4

You are very welcome! Happy coding! :slight_smile:

5

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