Learn Typography by Building a Nutrition Label - Step 49

HTML-CSS
1

I can’t tell what the issue is here. can someone explain

The bottom borders under your % Daily Value * and Saturated Fat 1g 5% elements do not extend the full width of the label. Add no-divider to the class for these two elements.

Your p element with the text % Daily Value * should have no-divider added to the class attribute. Do not remove the existing classes.

Your code so far

/* file: index.Ext.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>
        <p>Calories</p>
      </div>
      <span>230</span>
    </div>
    <div class="divider medium"></div>
    <div class="daily-value small-text">
      <p class="no-divider" class="bold right">% Daily Value *</p>
      <div class="divider"></div>
      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
      <p class="no-divider" class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
    </div>
  </div>
</body>
</html>

/* file: styles.Ext.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;
}

.medium {
  height: 5px;
}

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

.right {
  justify-content: flex-end;
}

.indent {
  margin-left: 1em;
}

.daily-value p {
  border-bottom: 1px solid #888989;
}

Your mobile information:

SM-S928B - Android 14 - Android SDK 34

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

Link to the challenge:

2

Hi there!
No need to add second class=, place it after the existing class value and add a space, example:
<p class="first-value second-value">

1 Like
3

still i am getting the same thing

4

Please create your own topic when you have specific questions about your own challenge code. Only respond to another thread when you want to provide help to the original poster of the other thread or have follow up questions concerning other replies given to the original poster.

The easiest way to create a topic for help with your own solution is to click the Ask for Help button located on each challenge. This will automatically import your code in a readable format and pull in the challenge url while still allowing you to ask any question about the challenge or your code.

Thank you.