Why when i put a margin-top on a div on the other one the BODY takes it too?

Question

I dont understand why when i put the margin-top at class="container", the margin-top is token by the all div class="navbar-fixed z-depth-0 blue"

.navbar-fixed {
    height: 200px;
}

.col.s12.a {
    left: 0;
    right: 0;
}

#cnt{
    margin-top:50px; 
}

    <div id="nav" class="navbar-fixed z-depth-0 blue">
        <div id="cnt" class="container">
            <div class="row">
                <div class="col l6" style="border:1px solid black">
                    <h4>aaa</h4>
                </div>
                <div class="col l6" style="border:1px solid black">
                    <h4>ss</h4>
                </div>
            </div>
        </div>
    </div>

Answer 1

What you have is collapsed margins. In your particularly case you can put padding on #nav instead of margin on #cnt:

#nav { padding-top: 50px; }