Learn Typography by Building a Nutrition Label - Step 22

Step 22

Horizontal spacing between equally important elements can increase the readability of your text.

Wrap the text 2/3 cup (55g) in a span element, and give it a class attribute set to right.

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>

<!-- User Editable Region -->

    <div class="label">
      <h1 class="bold">Nutrition Facts</h1>
      <div class="divider"></div>
      <p class="bold">Serving size<span class="right">2/3 cup (55g)</span></p>
    </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;
}

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

Your browser information:

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

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

Link to the challenge:

Repeating the question and hint will not help.

What is your question in this step?

The instruction ask you to code the span element

You have not done anything related to it

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