How do I add space between two divs? - html

Question

I'm designing a webpage, but I'm a total HTML/CSS newbie. I want the following format:
A top half, and a bottom half.
The top half contains 6 big boxes, organized into two columns of 3 boxes.
The bottom half contains some other content, whatever I want.
Right now I (somehow) have it working, but the only thing is the "bottom_half" is too close to the "top_half" -- I just want to add a bit more of a margin in between. But when I tried doing that weird things would happen and I don't understand what I'm doing wrong.
Here's an outline of my html layout:
<div class="top_half">
<div class="left_half">
<div class="big_box">
<!-- box 1 content -->
</div>
<div class="big_box">
<!-- box 2 content -->
</div>
<div class="big_box">
<!-- box 3 content -->
</div>
</div> <!-- left-half -->
<div class="right_half">
<div class="big_box">
<!-- box 4 content -->
</div>
<div class="big_box">
<!-- box 5 content -->
</div>
<div class="big_box">
<!-- box 6 content -->
</div>
</div> <!-- right-half -->
</div> <!-- top-half -->
<div class="bottom_half">
<!-- bottom-half content -->
</div>
My CSS for top and bottom half look like this:
.top_half {
height: auto;
width: auto;
margin-top: 70px;
padding-top: 70px;
background: lightgreen
}
.bottom_half {
height: auto;
width: auto;
margin-top: 70px;
padding-top: 70px;
background: lightyellow;
}
Oddly, the top_half div is just a pretty tiny bar at the top of the page, and bottom_half div is taking basically the entire page.
Is my layout bad? Should I be doing it differently? I really have no experience with this at all, so I'm learning as I go along.
Thanks!
EDIT:
Fixed some typos. Take a look at this to see what I mean: https://jsfiddle.net/d7ejv3ad/3/
^^ why aren't the grey boxes staying inside the green bar???

Answer 1

Demo: https://jsfiddle.net/d7ejv3ad/
HTML
<main>
<div>
<div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
</div>
<div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
</div>
</div>
<div>
Content
</div>
</main>
CSS
main > div:first-child {
height: 50vh;
width: auto;
background: lightgreen
}
main > div:first-child > div { display: inline-block; height: 100%; width: 49%; }
main > div:first-child .boxes {
margin: 2.5% 0 0 2.5%;
width: 28%;
height: 28%;
background: #fff;
}
main > div:last-child {
height: 50vh;
width: auto;
padding: 50px;
background: lightyellow;
}

Answer 2

there is a typing error in second line of HTML code <div class="left_half> this should be like <div class="left_half">
additionally add this one line in your CSS
.big_box{display:inline;}