blok od marginesu nav nie w kolejnosci

Question

Cześć, za każdym razem robię cztery bloki w np header to jeżeli mam już dwa poziomo  jak stawiam nowe to zaczynają się od marginesu górnego menu i nachodzą na siebie. Jak zrobić tak aby każdy kolejny zaczynał margines od tych bloków które są powyżej ?

Rysunek w paint:

https://zapodaj.net/d32ad3ddacac8.png.html

kod:

    <main class="title">
        <div class="one">
            <h2><span>Monster Akademia</span> Rio Grappling Club Rybnik</h2>
            <p>Akademia w której uczymy Brazylijskiego Jiu-Jitsu i MMA Naszą misją jest zapewnienie bezpiecznego i przyjaznego środowiska, w którym każda osoba może trenować i uczyć się sztuk walki, w luźny i wesoły sposób poprawić swoją formę w towarzystwie przyjaznych ludzi, jednocześnie rozwinąć koncentracje, pewność siebie i wytrwałość.

                Skupiamy się zarówno na aspektach rekreacyjnych jak i wyczynowych sportów, które uczymy. Pragniemy rozwijać nasz klub bez nadmiernej pogoni za doskonałością, jednak tak by stać się jedną z najlepszych akademii Brazylijskiego Jiu-Jiustu i MMA.</p>

        </div>


        <div class="two">

            <h2>Dlaczego BJJ jest dobre dla dzieci i młodzieży.</h2>
            <p>Co to jest brazylijskie jiu jitsu?
                Brazylijskie jiu-jitsu (BJJ) powstało na początku XXw w Brazylii na bazie japońskiego ju-jitsu. Za twórców systemu uważa się członków rodziny Gracie (stąd też stosowana czasem nazwa Gracie Jiu Jitsu). Dzięki spektakularnym zwycięstwom w walkach z minimalną ilością reguł (często z silniejszymi fizycznie przeciwnikami) członkom rodziny Gracie udało się spopularyzować BJJ na całym świecie. System wciąż zyskuje na popularności ze względu na jego wykorzystanie w walkach MMA.</p>


        </div>

        <div class="three">


        </div>
        <div class="four">

            </div>

        </div>

    </main>

.title {


    background-color: white;
    height: 600px;
    width: 100%;
}

.one {
    margin-top: 50px;
    position: absolute;
    margin-left: 180px;
    background-color: #2e9339;
    height: 230px;
    padding: 30px;
    width: 40%;

}

.one p {
    font-family: exo;
    font-size: 1.4rem;
    text-align: center;
    color: white;
}

.one h2 {
    font-family: exo;
    text-transform: uppercase;
    font-size: 2.0rem;
    text-align: center;
    margin-bottom: 20px;
    color: white;
}

.one span {

    color: black;

}


.two {

    margin-top: 50px;
    padding: 30px;
    position: absolute;
    right: 180px;
    background-color: #2e9339;
    height: 230px;
    width: 40%;
}

.two p {
    font-family: exo;
    font-size: 1.4rem;
    text-align: center;
    color: white;
}

.two h2 {
    font-family: exo;
    text-transform: uppercase;
    font-size: 2.0rem;
    text-align: center;
    margin-bottom: 20px;
    color: white;
}

.three {

    margin-top: 320px;
    margin-left: 180px;
    position: absolute;
    background-color: white;
    height: 400px;
    width: 40%;
}



.four {

    position: absolute;
    right: 180px;
    margin-top: 320px;
    background-color: #4267b2;
    height: 230px;
    width: 25%;
}

.four i {
    font-size: 80px;
    color: white;
    margin-left: 200px;
    margin-top: 20px;

}

.four a {
    color: white;
    text-decoration: none;
    font-family: exo;
    padding: 10px;
    margin-top: 50px;

}

.four h2 {

    text-align: center;
    margin-top: 30px;
    font-family: exo;
    color: white;
    text-transform: uppercase;
    font-size: 2.0rem;
}

.four1 {
    text-align: center;
    margin-left: 50px;
    margin-top: -50px;
    font-size: 1.8rem;
}