When using flex you often use justify-content or align-items to position the items where you want them.

To make one flex item move to the right is really simple. You can to go back to basic and use margin-left: auto;.

The element below will hide after 5 seconds automatically. If there is no element, refresh the page because then 5 seconds has probably already passed.

It's not hard to create a parallax scroll image with CSS. Just add background-attachment: fixed; to it.

Scroll down to see the effect.

Here we have a list. It's not as straight forward as it seems to make the active list item be selected all the way to the left,

The trick is to use a pseudo element that spans all the way out.

Hover the icon below and it will be inverted to white. The trick is to use filter: invert(1);.

HTML

<figure>
  <img src="http://csspoo.com/assets/images/remixicons/link.svg">
</figure>

CSS

figure {
  display: inline-block;
  padding: 1rem;
  background: #eee;
}

figure img {
  filter: invert(1);
  vertical-align: top;
}

figure:hover {
  background: #000;
}

figure:hover img {
  filter: invert(0);
}