Not showing all 3 boxes in "main axis"

HTML-CSS
1

Can any one help me why below logic is not showing all 3 boxes in “main axis”?
“display: flex;” is applied on the 

<style>
#box {
  background: black;
  display: flex;
}

#box-1 {
  background-color: dodgerblue;
  width: 25%;
  height: 100%;
}

#box-2 {
  background-color: orangered;
  width: 25%;
  height: 100%;
}

 #box-3 {
  background-color: gray;
  width: 25%;
  height: 100%;
}
</style>

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

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.116 Safari/537.36.

Challenge: Align Elements Using the justify-content Property

Link to the challenge:

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).