html+css : 段違いに配列する、実験いろいろ

div 段違い配置

<body>
    <header>
        <div class="a">Go to Back Japan</div>
        <div class="b">get 5</div>
        <div class="a">evry day</div>
    </header>
</body>

headerをdivにすると乱れてしまいます。

.main{
    height: 90px;
}
div{
    padding: 8px;
    border: 1px solid red;
    margin: 6px;
    width: 180px;
    border-radius: 7px;
    float: left;
}
.b{
    margin-top: 20px;
}

色々実験していますが、どうしてそうなるのか今の私には理解できません。