Bug? on Step 26 - Learn Typography by Building a Nutrition Label

HTML-CSS
1

Seems like my answer doesn’t work on Step 26

" Create a new div element below your header element, and give it a class attribute set to divider 1g."

  <div class="divider 1g"></div>

/* 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 class="right">2/3 cup (55g)</span></p>
    </header>
    <div class="divider 1g"></div>
  </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;
}

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

.bold {
font-weight: 800;
}

.right {
float: right;
}

  **Your browser information:**

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

Challenge: Step 26

Link to the challenge:

2

i believe you typed 1g instead of lg, when i did these lessons I wrote the actual code myself to learn it but i copy pasted the names or innerHtml text to avoid this issue

4 Likes
3

That worked! Thanks :slight_smile:

4

Wow! That’s subtle. I made that exact same mistake. Thanks for the help!

5

Thanks and good catch! It is so weird because it totally looks like the number 1.

1 Like
6

Got 1 letter wrong

8

Yeah it does. But one way learned how you can tell the difference is in the instruction. The number will be without a line on the bottom though it does not change how it will look in the actually code. My tip would to pay close attention to instruction and remember that the number 1 would be without a line on the bottom

9

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