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

Tell us what’s happening:
Describe your issue in detail here.
hey, so i can’t tell what i am doing wrong here, i deleted the prior margin code ( been reading the previous posts on here) and entered the property value as it’s asking… any direction for me?

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">
      </div>
      <div class="marker">
      </div>
      <div class="marker">
      </div>
    </div>
  </body>
</html>
/* file: styles.css */
h1 {
  text-align: center;
}


/* User Editable Region */

.marker { margin: 10px: auto;
  width: 200px;
  height: 25px;
  background-color: red;
  
}

/* User Editable Region */


Your browser information:

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

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

Link to the challenge:

Just a typo- You shouldn’t separate to values in one attribute with a colon because that signals the end of the statement before you’ve added the auto value. Delete the colon after the 10px.

You don’t want to delete the margin property. You just want to change it to 10px auto.

Ahh, I see you still have the margin property (you just moved it sort of in a strange place). Ya, like @starstruck said, typo.

1 Like

marker {
margin: 10px;
width: 200px;
height: 25px;
background-color: red;

`

Blockquote
I did what you suggested starstruck, and it seemed promising as it looks like the rest, but it still didn’t pass?
`

To properly format your code always post it between ```` marks that appear when clicking the </> button in the menu bar of your reply.
You correctly removed the spare colon after your 10px value but you should the value of auto as well , just separate them with an empty string.


.marker {
margin: 10px; auto

width: 200px;
height: 25px;
background-color: red;

}…
like this? so I followed your suggestion, and it actually did the action they were wanting which was to create space between the 3 markers so they weren’t all together like a box, but a las it is still not passing… i played with the colon/ semi colon at the end of the value and it didn’t fix it either.

also, thank you. I really appreciate your responses, I feel like i am learning how the different prompts behave more from your replies than what is explained in this program ( which i love i am not knocking) just appreciate understanding how they act helps.

1 Like

I’m glad that’s its working :smiling_face: :smile: .
I also struggled with the short hand-way of using margin but I figured it out eventually thanks to FCC awesome contributors who guided me.
Here’s a short explanation:
EX:

.elementName{ 
margin-top:10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}

Sets the top and bottom margin to 10px each and left/right to auto (auto adds just the right amount of margin so that your element is centered in the middle of the page).

Here is a shorter way:

.elementName{
margin: 10px auto 10px auto;

The value represent

  • margin-top

  • margin-right

  • margin-bottom

  • margin-left

In this order.
Think of it as clockwise: top. left. bottom. right.

In this step the top/bottom margins where the same and left/right margin were the same.

Therefore:

.elementName{ margin: 10px auto;}

represent margin-top/bottom together and then margin-left/right values as one.

Hope this helps and I’m not mistaken because I know I still struggle when it comes to using short-hand properties.

2 Likes

it worked and i feel like i just made a huge breakthrough in understanding something! thank you so much for your explanation!!! definately saving this for later.
thank you!!!

1 Like