непонятно как работает margin

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
       <div class=
"header">
       <div class="content">
       Header 
       </div>
</div>
        Menu
        Promo 1
        Promo 2
        Left
        Main
        Right
        Footer
    </body>
</html>


html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 450px;
    height: 335px;
    font-family: "Arial", sans-serif;
    font-size: 10px;
    color: white;
}
header
{
width:450px;
height:100px;
background-color:  #34495e;
}
content
{
width:400px;
height:40px;
margin:auto;
background-color: #c0392b;
}
/*
    Используемые цвета:
    #34495e – мокрый асфальт
    #c0392b – красный
    #3498DB – синий
*/

Почему margin-top у content задается относительно окна браузера, а не относительно родительского элемента header?

Вы забыли об эффекте “выпадания” внешних отступов, освежите в памяти:
https://htmlacademy.ru/courses/44/run/10