freeCodeCamp/guide/english/certifications/responsive-web-design/css-flexbox/add-flex-superpowers-to-the.../index.md

996 B

title
Add Flex Superpowers to the Tweet Embed

Add Flex Superpowers to the Tweet Embed

Building on the previous challenge, you will need to add the property to the right selectors. Here the trick is identifying the right selector then all you need to add the display: flex; property.

The header will ensure the picture, name, handle, and follow buttons get repositioned horizonatally.

header {
    display: flex;
}

Aligns the name and handle to look as one sentence.

header .profile-name {
    display:flex;
    margin-left: 10px;
  }

Adding the property to the follow button along with the margin will center the button to the right size.

header .follow-btn {
    display:flex;
    margin: 0 0 0 auto;
  }

The same idea is used on the footer elements.