Как сверстать шапку?
Это нужно делать градиентом:
- сверстать 6 цветов градиентом,
- поставить background-size: 600px 4px — чтобы каждая полоска была равно 100px,
- повторять фон только горизонтально background-repeat: repeat-x;.container {
    margin: auto;
    background: #FFF;
    max-width: 960px;
    background-image: linear-gradient(to right,
        #50B5AD 0%,     #50B5AD 16.67%,
        #FFBBB7 16.67%, #FFBBB7 33.33%,
        #F8506C 33.33%, #F8506C 50%,
        #ADB347 50%,    #ADB347 66.67%,
        #F5CE42 66.67%, #F5CE42 83.33%,
        #A2DBD6 83.33%, #A2DBD6 100%);
    background-size: 600px 4px;
    background-repeat: repeat-x;
}
codepen.io/paulradzkov/pen/eZydxg
А нельзя вместо 100px использовать %, раз уж контейнер в %. 
Но можно задать несколько backgroundbackground-color:#fff,#ff3,#ddd;
 background-position:0 0, 100px 0, 200px 0;
только не 3 прописать, а 29 или сколько там надо Вам. Или вместо background-color, background-image
Можно сделать и в js. Вычислить ширину родителя, разбить на куски по 100px и т.д.