Add Flex Superpowers to the Tweet Embed HELP

Tell us what’s happening:
I’m afraid I’m in trouble. Despite I managed to fill with classes with “display:flex” there’s nothing I can do to solve it :confused: Since I’ve been asking peers to do the same test I’m afraid something’s wrong with the editor. It says:" Your

header

should have a

display

property set to

flex

. Your

.follow-btn

should have a

display

property set to

flex

.
Your code so far


<style>
body {
  font-family: Arial, sans-serif;
}
header {

}
header .profile-thumbnail {
  width: 50px;
  height: 50px;
  border-radius: 4px;
}
header .profile-name {
  display:flex;
  margin-left: 10px;
}
header .follow-btn {
  display:flex;
  margin: 0 0 0 auto;
}
header .follow-btn button {
  border: 0;
  border-radius: 3px;
  padding: 5px;
}
header h3, header h4 {
  display:flex;
  margin: 0;
}
#inner p {
  margin-bottom: 10px;
  font-size: 20px;
}
#inner hr {
  margin: 20px 0;
  border-style: solid;
  opacity: 0.1;
}
footer {
display:flex;
}
footer .stats {
  display:flex;
  font-size: 15px;
}
footer .stats strong {
  font-size: 18px;
}
footer .stats .likes {
  margin-left: 10px;
}
footer .cta {
  margin-left: auto;
}
footer .cta button {
  border: 0;
  background: transparent;
}
</style>
<header>
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<div class="profile-name">
  <h3>Quincy Larson</h3>
  <h4>@ossia</h4>
</div>
<div class="follow-btn">
  <button>Follow</button>
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
</div>
<footer>
<div class="stats">
  <div class="Retweets">
    <strong>107</strong> Retweets
  </div>
  <div class="likes">
    <strong>431</strong> Likes
  </div>
</div>
<div class="cta">
  <button class="share-btn">Share</button>
  <button class="retweet-btn">Retweet</button>
  <button class="like-btn">Like</button>
</div>
</footer>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36.

Challenge: Add Flex Superpowers to the Tweet Embed

Link to the challenge:

As you can see here, your header does not have a display: flex;

do a full reset of your code and try again


Since it has worked for me for the first test in your same code …

<style>
body {
  font-family: Arial, sans-serif;
}
header {
display:flex;
}
header .profile-thumbnail {
  width: 50px;
  height: 50px;
  border-radius: 4px;
}
header .profile-name {
  display:flex;
  margin-left: 10px;
}
header .follow-btn {
  display:flex;
  margin: 0 0 0 auto;
}
header .follow-btn button {
  border: 0;
  border-radius: 3px;
  padding: 5px;
}
header h3, header h4 {
  display:flex;
  margin: 0;
}
#inner p {
  margin-bottom: 10px;
  font-size: 20px;
}
#inner hr {
  margin: 20px 0;
  border-style: solid;
  opacity: 0.1;
}
footer {
display:flex;
}
footer .stats {
  display:flex;
  font-size: 15px;
}
footer .stats strong {
  font-size: 18px;
}
footer .stats .likes {
  margin-left: 10px;
}
footer .cta {
  margin-left: auto;
}
footer .cta button {
  border: 0;
  background: transparent;
}
</style>
<header>
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<div class="profile-name">
  <h3>Quincy Larson</h3>
  <h4>@ossia</h4>
</div>
<div class="follow-btn">
  <button>Follow</button>
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
</div>
<footer>
<div class="stats">
  <div class="Retweets">
    <strong>107</strong> Retweets
  </div>
  <div class="likes">
    <strong>431</strong> Likes
  </div>
</div>
<div class="cta">
  <button class="share-btn">Share</button>
  <button class="retweet-btn">Retweet</button>
  <button class="like-btn">Like</button>
</div>
</footer>
Summary

Hey @gingerhash-gg,

  • Next time you want to showcase a code, use the ``` backtick so it is easier for everyone to read.
    See this post to find the backtick on your keyboard.
    The “preformatted text” tool in the editor (</>) will also add backticks around text.

header filled, same issue. Also I tried to reset the challenge two times

  • Your code works fine for me. It seems like the problem might be your browser’s extensions that have access to the FCC site.
    Try disabling some extensions. If the problem still persists, you can try to use a different browser.