Wie füge ich Leerzeichen zwischen zwei Divs hinzu?

Question

Ich entwerfe eine Webseite, aber ich bin ein totaler HTML/CSS-Neuling. Ich möchte folgendes Format:

Eine obere Hälfte und eine untere Hälfte.

Die obere Hälfte enthält 6 große Boxen, die in zwei Spalten zu je 3 Boxen aufgeteilt sind.

Die untere Hälfte enthält einige andere Inhalte, was immer ich will.

Im Moment habe ich (irgendwie) es funktioniert, aber die einzige Sache ist die "bottom_half" ist zu nah an der "top_half" - Ich möchte nur ein bisschen mehr Marge dazwischen hinzufügen. Aber als ich es versuchte, geschahen seltsame Dinge und ich verstehe nicht, was ich falsch mache.

Hier ist ein Überblick über meine 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> 

Meine CSS für obere und untere Hälfte wie folgt aussehen:

.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; 
} 

Merkwürdig ist, ist die top_half div bei der eine ziemlich kleine Bar gleich Anfang der Seite, und bottom_half Div nimmt grundsätzlich die gesamte Seite.

Ist mein Layout schlecht? Sollte ich es anders machen? Ich habe wirklich keine Erfahrung damit, also lerne ich, während ich mitfahre.

Danke!

BEARBEITEN:

Einige Tippfehler behoben. Schau dir das an, um zu sehen, was ich meine: https://jsfiddle.net/d7ejv3ad/3/ ^^ warum sind die grauen Boxen nicht in der grünen Leiste ???

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

ein Tippfehler in der zweiten Zeile HTML-Code ist <div class="left_half> dies wie <div class="left_half"> sein sollte zusätzlich hinzufügen, um diese eine Zeile in Ihrem CSS

.big_box{display:inline;}