Learn Typography by Building a Nutrition Label - Step 33

HTML-CSS
1

Hi everyone,
A bit baffled by the following step. I am suppose to incluse a span element after the 'left-container element. I followed the step but continually places 230 above the ‘Calories’ heading. I googled span element and how it should be written as it is a generic inline container. I thus wrote out the span element including the positioning with class=“right”. Error message, 'span element has to come after left container. Wrote out code again without mentioning class right, same error message occurred. On both instances placing span beside or below left container code doesnt seem correct in any case as the 230 value ends up being positioned above the ‘Amount per serving’ and ‘Calories’ titles. I have reset code as well as closed program and re-opened. I’m a brand new beginner coder on my 3rd week on freecode so I may be missing the obvious. Any help or guidance regarding the above will be much appreciated.

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">
        <span class="right">230</span>
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

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

Link to the challenge:

2

Hello,

Since hints are better than solutions, I’m gonna give you one. The instruction said AFTER the .left-container element. An html element takes generally an opening and closing tag. So after the element is after its closing tag. Hope you’ll get it . :wink:

Happy coding !

3

Thanks for the tip. Figured it out. Sometimes we just need to read :laughing:

1 Like
4

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