Problem z divami. Przesunięcie diva ku dołowi.

pytanie zadane 17 stycznia 2018 w HTML i CSS przez whichmann Nowicjusz (150 p.)

Cześć wszystkim. To mój pierwszy wpis tutaj także pozdrawiam serdecznie. Mam pytanie dotyczące layoutu, który próbuję zrobić.

body
{
    background-image: url(../img/waves.png);
    /* background pattern from subtlepatterns.com */
}

.container
{
    background-color: rgb(255, 255, 255);
    width: 900px;
    height: 2000px;
    margin: auto;

}
.logo
{
    background-color: grey;
    width: 900px;
    height: 60px;
}
.menu
{
    background-color: black;
    width: 600px;
    height: 40px;
    display: inline-block;
    margin-right: -4px;
}
.share
{
    background-color: rgb(190, 158, 146);
    width: 300px;
    height: 40px;
    display: inline-block;
    margin-right: -4px;
}
.box
{
    background-color: rgb(99, 80, 74);
    width: 600px;
    height: 400px;
    display: inline-block;
    margin-right: -4px;
    text-align:center;
    margin-top: -5px;
}
.boxie
{
    background-color: rgb(170, 148, 148);
    width: 250px; height: 150px;
    display: inline-block;
    margin-right: -4px;
}
.wide_boxie
{
    background-color: rgb(158, 95, 95);
    width: 500px;
    height: 150px;
    display: inline-block;
    margin-right: -4px;
}
.sidebar
{
    background-color: rgb(148, 85, 139);
    width: 300px;
    height: 400px;
    display: inline-block;
    margin-right: -4px;
    margin-top: -5px;
}

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8">
        <title>The Title!</title>
        <meta name="description" content="A detailed description that makes sense.">
        <meta name="keywords" content="stuff">
        <meta name="author" content="KW">
        <mets http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1"><!--ustawienie kompatybilności ze starszymi preglądarkmi-->
        <link rel="stylesheet" href="css/main.css"> <!--WSTAWIANIE CSS-->
        <script src="code.js"></script> <!--WSTAWIANIE js-->

    <body>
        <div class="container">
            <div class="logo"></div>
            <div class="menu"></div>
            <div class="share"></div>
            <div class="box">
                    <div class="boxie"></div>
                    <div class="boxie"></div>
                    <div class="wide_boxie"></div>
            </div>
            <div class="sidebar"></div>
            <!--<div class="kicker"></div>
            <div class="kicker"></div>
            <div class="kicker"></div>
            <div class="footer"></div>
            <div class="footer"></div>-->
        </div>
    </body>
</html>

<!--<meta charset="UTF-8" /> <!--ustalenie kodowania znaków,-->
<!--<title>Title of the document</title> <!--widoczne na karcie strony -->
<!--<header> 1st page </header> <!-- nagłówek,-->
<!--<nav> 1st page </nav> <!--menu,-->
<!--<article>1st page </article> <!-- artykuł (zawiera nagłówki, tekst itd.),-->
<!--<section>1st page </section> <!-- główna część witryny (główna kolumna),-->
<!--<aside>1st page </aside> <!-- elementy uzupełniające (np. boczna kolumna z widgetami),-->
<!--<footer> 1st page</footer> <!-- stopka.-->

- czy jest jakaś komenda, która ustawiłaby divy 1, 2 i 3 na środku (w pionie) diva 5? Wykorzystanie: position:absolute; top:50%; left:50%; w wewnętrznych divach nie przynosi oczekiwanych rezultatów.

- cały div 5 jest przesunięty ku dołowi. Wiem, że gdzieś musi leżeć błąd ale nie potrafię go zidentyfikować. Ponadto, jeśli wyrzucę div 4, muszę dla div 5 zastosować margin-top: -5px; inaczej widoczna będzie biała linia między divem 5, a divem powyżej - dlaczego tak się dzieje? dlaczego akurat 5px?
Z góry dziękuję za pomoc!