Pink span not showing up

Why isn’t the pink .progress showing up inside the black .meter div?

Span tags are inline elements. You will need to make it a display:block element to have it show.

See here for a guide to display tags:

and here to understand span tags:

https://www.w3schools.com/tags/tag_span.asp

You see a shorter description of display property at:

https://www.w3schools.com/cssref/pr_class_display.asp

Specifically, this line:

inline Displays an element as an inline element (like <span>). Any height and width properties will have no effect

All elements have a default display value, and not all default to the same value. Span tags are default inline elements.

Span is not a block level element.

You need to either set Display on the span in your CSS or change it to a div.

Well, it is also empty, give it some padding.

.meter {
  background-color: black;
  border-radius: 25px;
  height: 30px;
  width: 100%;
  position: relative;
}

#progress {
  background-color: #FEBBDE;
  border-radius: 25px;
  padding: 15px;
  position: absolute;
}

Ok, I realised what I was doing wrong, thanks.

How do I stop the pink progress bar going over the black meter? Increasing #meter’s width doesn’t help.

You need to account for the padding on progress, or use box-sizing: border-box and rework the CSS. The frame function might also not quite be working as intended.

Here is a working example:

Thanks. It’s done now, I just need to center it in the middle of the page.

display: flex;
align-items: center;
justify-content: center;

isn’t working, it turns my progress bar into a circle for some reason. Help?

I updated the pen, but really you just need to give it a width (you can also use the flex short-hand or flex-basis to control the flex item).