Assessment wanted for Backgrounds and Borders skill test exercise

MDN Learn
#1

I completed these tasks: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders

Task 1: https://codepen.io/user4592357/pen/JjXdWyY
Task 2: https://codepen.io/user4592357/pen/jOqPBZX
In task 2, how do I make sure only 3 stars are shown, as in image provided in assignment?

Please review it.

CC @chrisdavidmills, the suggested title for these tasks is “Assessment wanted for Flexbox layout 1 skill test” instead of “Backgrounds and Borders”, please fix it :slight_smile:

#2

change the background to be applied to the h2 element and not to the box element (and remove the h2 margin)

1 Like
#3

@Rafael_Green thanks for suggestions.
I removed the h2 margin, but the left star and heading still kinda overlap. how do I fix that without margin?

#4

The best way to handle situations like this is to use padding.
The width of the background star in this case is 30px.
So put this inside the h2 css rule:

/* vertical | horizontal */
padding: 0px 30px;

and also change this:

background-position: 7px center, right center;

to:

background-position: left center, right center;
#5

@Rafael_Green I used margin because margin is used to push other elements away, and padding is used to push element’s content away from borders. Isn’t that correct?

#6

In this case, the stars are part of the h2 element, so you want to push it’s text away from the border.
Margin won’t work in this case because you don’t want to push other elements from the h2 element.
You want to push the text away from the stars.

1 Like
#7

@Rafael_Green that makes sense :+1: now it looks perfect, thanks!