Flex-wrap new line

hello

when i am using the flex-wrap the new line has too much space to the first line. how can i control the amount of space between the two lines and why does it happen in the first place? why does the new line go right after the first line?
why does the flex-wrap add so much space?

this is what i used:

.box-container{
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    

}

.box1{
    width: 30%;
    height: 100px;
    background-color: red;
   
}

.box2{
    width: 40%;
    height: 100px;
    background-color: blue;
  
}
.box3{
    width: 40%;
    height: 100px;
    background-color: green;
  
}

hey @camperextraordinaire thanks for the help

this is the html

i can solve it with margin-top attribute but i want to know if there is a better explanation

<div class="box-container">
        <div class="box1"></div>
        <div class="box2"></div>
           <div class="box3"></div>
        
        </div>