Learn Typography by Building a Nutrition Label - Step 22

HTML-CSS
1

Tell us what’s happening:
So in the next section we use flex to add horizontal spacing but I don’t understand how this works exactly. Wrapping a part of the text with span causes the wrapped part to shift to the right, but I wanna know why that happens. Why does span and display:flex, justify-content:space-between together cause the text to move to the 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>8 servings per container</p>
    <p class="bold">Serving size 2/3 cup (55g)a</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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36 Edg/112.0.1722.48

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

Link to the challenge:

2

Maybe instead creating thread for this step you can create the thread for the next step which is more accurate.

But to answer your question, it is not simply move to the right. It creating a space between the two text.

To better understand flexbox you can try out this simply game

Display flex will change the element layout.