Html css output problem

HTML-CSS
1

Tell us what’s happening:
I am trying to do a task but it isn’t working though I am 100% sure that it’s alright. I added display property and set it to flex but the follow button and share button are not appearing on the output screen.
Please help…

Your code so far


<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 class="follow-btn">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 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36.

Challenge: Add Flex Superpowers to the Tweet Embed

Link to the challenge:

2

I just tried your code in CodePen, and was able to render the “follow” and “share” button.

That being said, I’m not sure if the "follow "button should be above the “share”, “retweet”, and “like” button. https://codepen.io/geekyhustle/pen/BaoBogB

3

hello @Madhav1. Welcome to the forum: :smiley:

I ran your code in my computer and everthing is ok.

  1. Try to run your code in other browser.
  2. Clean the cache in your current browserw.
  3. Disable some extension in your browrser.

Saludos :smiley: