Learn Typography by Building a Nutrition Label - Step 33

*Tell us what’s happening:
my code isnt passing whats the typo

Your code so far

<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>
<!-- 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>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/116.0.0.0 Safari/537.36

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

Link to the challenge:

Hello!
These steps are a bit tricky.

The span should come after the closing div for the left-container class.

I hope this helps you continue on your coding journey.

You are doing great! :slight_smile:

1 Like

Thanks for that but have already found a solution to it have you finished all levels you

1 Like

Yes, I have finished all of my projects. I keep going back to update them, as I learn more from helping others and working in JavaScript, Front End Development and Microsoft.

You are doing great! :slight_smile:

And this is a great community to assist others!

1 Like

Thanks I will always be here to get guidance because am coding all alone sometime I feel frustrated but I know 8 must win thanks once more

You will go far with a positive outlook, like it appears you have for you to reach your goal.

I find when I get frustrated, I step away from it for a bit. An hour or two, and come back with a clear head.

Never feel alone. The community is here, and if you wish people to code with you, post a request for others in the General subforum. You can check out the General subforum and find others looking for people to support each other.

But, always know the forum is here to assist you. We do not provide direct answers because that is not helping for when we want to use the code for projects or employment. But, we will guide you to find the solution.

Happy coding! :slight_smile:

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