Please how does the property "display" with the value "flex works? i have written exactly the right code but it is not working"

Tell us what’s happening:

Your code so far


<style>
 #box-container: {
 height: 500px;
 display: flex;
 
}

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

 #box-2 {
   background-color: orangered;
   width: 50%;
   height: 50%;
 }
</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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36.

Challenge: Use display: flex to Position Two Boxes

Link to the challenge:

Hi @favy. Welcome to FCC. Remove : after #box-container.

Thank you so much. :raised_hands: :raised_hands: