HTML - container is positioned in the same row as its brother - html

Question

I want to implement a div which contains 2 divs:
A row with two sides, left and right.
A div below the first one
For that I am doing as follows:
<div id="main">
<div id="box1">
<div id="left" />
<div id="right" />
</div>
<div id="box2" />
</div>
And this is the css
.main {
margin-top: 75px;
}
#box1 {
display: flex;
flex-direction: row;
width: 100%;
height: 450px;
transition: ease all 0.5s;
}
#box1 #left {
width: 50%;
height: 100%;
background-color: lime;
}
#box1 #right {
width: 50%;
height: 100%;
background-color: red;
}
#box2 {
width: 100%;
height: 600px;
background-color: gold;
}
But for some reasons, I am getting the second div "box2" in the same row of "box1", next to it.
Why is that?

Answer 1

this seems to work (check full page view):
.left {
background: red;
width: 50%;
float: left;
}
.right {
background: green;
position: relative;
float: left;
width: 50%
}
.bottom {
background: blue;
position: relative;
width: 100%;
top: 9vh;
float: none;
}
<div id = "main">
<div id = "box2" class = "bottom" > bottom </div>
<div id = "box1">
<div class = "left"> left </div>
<div class = "right"> right </div>
</div>
</div>

Answer 2

You just missed the closing </div> tags
here is when it fixed, working perfectly fine
.main {
margin-top: 75px;
}
#box1 {
display: flex;
flex-direction: row;
width: 100%;
height: 450px;
transition: ease all 0.5s;
}
#box1 #left {
width: 50%;
height: 100%;
background-color: lime;
}
#box1 #right {
width: 50%;
height: 100%;
background-color: red;
}
#box2 {
width: 100%;
height: 600px;
background-color: gold;
}
<div id="main">
<div id="box1">
<div id="left">Left Contents Here</div>
<div id="right">Right Contents Here</div>
</div>
<div id="box2">Belowe Contents Here</div>
</div>