Paso 43 Su nuevo elemento p debe tener el texto Total Fat 8g 10%

Paso 43

Después de su último elemento .divider, cree un elemento p y asígnele el texto Total Fat 8g 10%. Wrap the text Total Fat in a span element with the class of bold. Wrap the text 10% in another span element with the class of bold. Por último, anide el elemento span Total Fat y el texto 8g en un elemento span adicional para alineamiento:

<!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>
     <p>
      <span class="bold">Total Fat 8g 10%</span>
    </p>
    <p>
      <span>8g </span>
      <span class="bold">10%</span>
    </p>
</body>
</html>

Bienvenido al foro @jrendonjaramillo

Por favor publique su código completo

<!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>
     <p>
        <span class="bold">Total Fat 8g</span> <span class="bold">10%</span>
      </p>
</body>
</html>

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

I have not been able to with this point:

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

you don’t have to make everything bold, only “Total Fat” with a span with the correct class. The other two span elements you add are without classes and are needed to separete the text in two, as you want Total Fat 8g to the left and 10% to the right, so you need one span around Total Fat 8g and one around 10%

Thanks for your help, I understand placing the code this way but it still doesn’t happen: it says Your first span element must wrap the text Total Fat:

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

Again, one span around Total Fat 8g (including the bold span) and one around 10%, you need to have two pieces of the text, not three, otherwise you don’t get the desired result with the positioning

 <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
       <div class="divider"></div>
    <p><span><span class="bold">Total Fat</span> 8g</span> <span>10%</span></p>
    </div>```
1 Like