Issue with CSS Flexbox

I’ve been going through the curriculum just fine (actually managed to correct some of my bad habits).

Currently on the CSS Flexbox section.
The task is to add display: flex; to header , the header’s .profile-name , the header’s .follow-btn , the header’s h3 and h4 , the footer , and the footer’s .stats - which I’ve done, but it still tells me I need to add it to the .follow-btn selector.

I’ve copy pasted (and added the semi) to the selector, I’ve reloaded the browser, manually added it to the tag in HTML, and even made a separate selector just for .follow-btn, but it still gives me the error.

It’s not so much that I need help solving the issue, it’s pretty straightforward; rather I’m just trying to bring this issue forward.

1 Like

you are going good man learn from your mistake have a great day ahead

Could you post your code? It is not possible to say anything without that

<— IGNORE THIS, SCROLL DOWN FOR CODE —>

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; }

I can’t post the HTML as it contains a link and FCC just yelled at me for security reasons.

Again, the issue isn’t the code, the issue is the fact that no matter what I do - the compiler still won’t recognize that .follow-btn has a ‘display:flex;’ property.

I just figured out how to insert code (It’s been a while since I’ve used a forum that’s had a preset insertion for code) so forgive me for the above atrocity.

<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://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" 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>

UPDATE:

(probably could’ve said this earlier) Initially was trying the solution on my Windows 10 PC through the Chrome Browser.

Switched to my Mac and attempted the lesson in a Safari browser. Did the same approach (copypasta + add semi) and it worked first time.

Aggravating. Thanks for your time.

Hi @Neronic,

Actually had the same issue but using Firefox : code correct but impossible to validate the challenge.

In case, I found the solution on this other post on the forum : disactivating Adblock made it work

2 Likes

hi, so is it for Mac which is able working? and windows 10 pc, not working, right? for display: flex;

I had exact same issue with this challenge. Turned off my adblock and it worked, thanks.