Build a Nutritional Label - Step 44

HTML-CSS
1

Tell us what’s happening:

i need help,i try in all the possible ways to write it as ordered but still same issue for rappin span arount the

Total Fat 8g

line, need help to know why he repeats same issue

You should have a span element around the code Total Fat 8g

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>
    <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="bold right">% Daily Value *</p>
      <div class="divider"></div>

<!-- User Editable Region -->

      <p>
   <span>
   <span class="bold">Total Fat</span> 8g
   </span>
   <span class="bold">10%</span>
      </p> 

<!-- User Editable Region -->

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Challenge Information:

Build a Nutritional Label - Step 44

2

try to do that but keeping the element all on the same line

1 Like
3

you show up as an angel here, it really worked, thanks a lottttt :white_heart: :white_heart:

4

im sorry but theres other one and i don`t want to make a new topic, last code in the css have a same issue, i publish it with the new issue which say that

You should have a .daily-value p:not(.no-divider) selector.

an i don`t know really where the problem is..

* {

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:not(.no-divider) {

border-bottom: 1px solid #888989;

}

5

that looks to be for a different step, then please create a new topic for that step

1 Like