Rogue item in my simple CSS flexbox! Help :P

HTML-CSS
1

Hello! Working on my front-end Product Landing Page project. Link here: https://codepen.io/EdenSweden/pen/bGeqPJZ?editors=1100

If you scroll down, you’ll see I nested three figures in a div with the .product-flex-container class. I want them all to line up in a nice row. For some reason, the third item with an id of #platinum simply jumps to the next line and acts like it’s not nested in the div at all, when I have triple checked that it is. How do I fix this?

1 Like
2

Hello @EdenSweden. Found the solution! It was just a small typo.
In line no. 32, a > is missing for the figcaption closing tag:

<figcaption>Silver: $89</figcaption  // <-- You missed it!

Happy Coding!

1 Like
3

Oh wow. I can’t believe I missed that after looking over it so many times! You have eagle eyes. Thank you so much.

1 Like
4

Glad you did it! You should be very careful when coding!

1 Like