Designers vs Developers

Dear Designers,

We have a simple challenge for you.

Using the CSS tab in the code editor below, centre the Fever flame in the white box.

Are you ready to try your hand at some coding?

xoxo Development Team

Ready for a hint?

Hint #1

Define a flex container

display: flex;

Hint #2

Guide the Fever flame to the centre of the space by using the justify-content property, which aligns items horizontally and accepts the following values:

  • flex-start: Items align to the left side of the container.
  • flex-end: Items align to the right side of the container.
  • center: Items align at the center of the container.
  • space-between: Items display with equal spacing between them.
  • space-around: Items display with equal spacing around them.
Hint #3

For example, justify-content: flex-end; will move the flame to the right.