The code seems backwards to start with

HTML-CSS
1

Tell us what’s happening:

Without even adding the lesson content, I don’t understand why the page is rendering the divs in reverse order JUST BECAUSE of the display: flex; (which I’ve disabled with a j) attribute has been added. Why is it rendering from right to left?

Thanks!

Your code so far


<style>
#box-container {
  disjplay: flex;
  height: 500px;
}
#box-1 {
  background-color: dodgerblue;
  
  height: 200px;
  width: 200px;
}

#box-2 {
  background-color: orangered;
  
  height: 200px;
  width: 200px;
}
</style>

<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36.

Challenge: Use the order Property to Rearrange Items

Link to the challenge:

2

the blue should be on the top (without flex) and on the left (with flex) at the start. i just plugged the code you posted in and it does that. is that not what you’re seeing?

1 Like
3

(smacks forehead) The order was reversed because I had this “dark mode” browser plugin enabled which, coincidentally, inverts the RGB values of everything on the screen and, in doing so, it reversed the order of the colors. IT WAS DRIVING ME NUTS! I thought I was missing something. (Well, I was, just not related to this. LOL!) Thanks for checking. Reply that you saw this and I’ll delete my (useless) question.

4

don’t delete it. someone else might be having the same problem and forgetting about their plugin too!

5

I think it’s unlikely, but that thought crossed my mind too. I’ll leave it, if for no other reason than to remind me of my occasional stupidity and keep me humble. :stuck_out_tongue_winking_eye: Thanks again!

6

challenges in freecodecamp are often not compatible with plugins or browser extensions that change colors

I’m sure next time you will remember :stuck_out_tongue_winking_eye: