Learn Typography by Building a Nutrition Label - Step 25

HTML-CSS
1

Tell us what’s happening:

Here is my code . I don’t know what I’m doing wrong. I checked this code in another editor and it runs fine.

‘’‘’‘.header,h1{
text-align: center;
margin: -4px 0;
letter-spacing: 0.15px;
}’‘’

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


/* User Editable Region */

.header,h1{
  text-align: center;
  margin: -4px 0;
  letter-spacing: 0.15px;
}

/* User Editable Region */


p {
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.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/133.0.0.0 Safari/537.36 Edg/133.0.0.0

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 25

2

Checking your code in another editor is a really good way to suss out what is going on, and it’s also a really good way for you to know if you are actually getting the concept of what you’re learning.

The downside is that when you plug code into here, it’s not really looking for whether the code works. It’s got checkpoints that the code needs to have in it.

As far as your code goes, it looks like you have a small syntax issue. I want to be careful how I answer this because I’m not yet totally clear about what counts as helping too much. So, I hope this isn’t too much, but look at all your punctuation marks and spacing; you should find the answer doing that.

Also, this community is big on formatting your code when you submit it, so try to make sure you get that right next time you ask.

Good luck and happy coding

1 Like