Learn CSS Colors by Building a Set of Colored Markers - Step 25

Tell us what’s happening:
Describe your issue in detail
Your .container CSS rule should have a padding property set to 10px 0…

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker one">
      </div>
      <div class="marker two">
      </div>
      <div class="marker three">
      </div>
    </div>
  </body>
</html>
/* file: styles.css */
h1 {
  text-align: center;
}

.container {
  background-color: rgb(0, 0, 0);
  padding-top:10px,0px;
  padding-bottom:10px,0px;
  padding:left:auto;
  padding:right:auto;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

.one {
  background-color: rgb(255, 0, 0);
}

.two {
  background-color: rgb(0, 127, 0);
}

.three {
  background-color: rgb(0, 0, 255);
}

Your browser information:

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

Challenge: Learn CSS Colors by Building a Set of Colored Markers - Step 25

Link to the challenge:

Check your .container css. You have extra colons. The first in each of those lines need to be replaced with a dash - it should work after that.

1 Like

where i don’t find anything

You should just have a padding.

.container  {
   padding: 10px 0
}

You don’t need to add the padding left and right since the padding shorthand takes care of the top and bottom with the first number and left and right with the second number.

1 Like

Finally it works, thanks man

1 Like

You’re very welcome now keep going :slight_smile:

1 Like

Will do for Sure and be ready to help on my next ques if i had any😉

1 Like