左邊的欄位已經寫完了，這篇開始從右側欄位開始撰寫內容，
預計 header 會長這樣，左邊是一排選單，右邊有一個按鈕，給客戶做意見回饋用，
如下圖:

為了要讓兩欄的可以同時出現在畫面上，有一個地方稍微做了調整，
之前有設定 .container-left 跟 .container-right 兩個 Class，
但少寫了一些東西，補充優化 SCSS，如下方程式碼所示:

.container-left {
    width: 20%;
    float: left;
}
左邊我設定為佔 container 的 20%，並靠左對齊。
.container-right {
    width: 80%;
    float: right;
}
右邊設定佔 container 的 80%，並靠右對齊。

這樣才會正常顯示左邊 aside 跟右邊的 content，

而右側欄位先寫上一個 header，裡面要放一排清單跟按鈕，
HTML 會長這樣:

<div class="container-right">
                <div class="header">
                    <ul class="menu">
                        <li><a href="#">精選</a></li>
                        <li><a href="#">頭條</a></li>
                        <li><a href="#">排行榜</a></li>
                        <li><a href="#">新發行</a></li>
                        <li><a href="#">曲風情境</a></li>
                    </ul>
                    <button class="btn">意見回饋</button>
    
                </div>
            </div>

應該不難發現，只要是清單類的，都可以用 ul li 來解決，而且樣式萬變不離宗...

而 SCSS 是這樣撰寫

.header {
    height: 50px;

    .menu {
        float: left;
讓 menu 靠左對齊
        li {
            float: left;
使之變成併排
            a {
                display: block;
                margin-right: 30px;
                font-size: 18px;
                color: #333;

                &:hover {
                    color: $lead-color;
                }
            }
        }
    }

    .btn {
        border: 1px solid #333;
        background: #fff;
        color: #333;
        float: right;
        padding: 5px;
        margin-top: 10px;
        cursor: pointer;
讓按鈕靠右對齊，
margin-top 是嘗試幾次出來的空間，純粹覺得視覺上是對齊清單的
        &:hover {
            background: $lead-color;
            color: #fff;
            border: 1px solid $lead-color;
        }
    }滑鼠經過按鈕的效果
}

今天的寫法也很簡單，一個網站到目前為止最常出現，而且重複的就是 ul li 的技法，
附上 Codepen https://codepen.io/hnzxewqw/pen/JjPmyPr