header

main

floatさせた要素は指定した方向へ流れる。

floatした要素の後の要素はfloatした要素を無視して配置する。

    html, body, header, main, nav, footer{
        box-sizing: border-box;
        margin: 0; padding: 0;
        border: 1px solid red;
    }
    
    html, body{
        width: 100%;
        height: 100%; 
    }
    
    main{ 
        float: right; /* floatさせて右に寄せる。 */
        width: 80%;
    }
    
    nav{ 
        float: left;  /* floatさせて左に寄せる。 */
        width: 20%;
    }