چيدن افقي ديو هادريک باکس اسکرول

سلام . من يه ديو درست کردم و Overflow-x رو روي scroll قرار دادم تا يه باکس اسکرول دار با ابعاد 400px در 100px بدست بياد . حالا ميخوام هفت تا (يا بيشتر ) ديو با ابعاد 100px در 100px بارنگ هاي مختلف رو به صورت افقي و در کنار هم توش بچينم که کاربر بتونه با اسکرول کردن اونها رو ببينه . اما نتيجه اون طوري که ميخوام نميشه و ديو ها يا روي هم قرار ميگيرن يا زير هم يا 4تا بالا و 3تا پايين . خواهش ميکنم اگر کسي ميتونه ، کمکم کنه . کد ها رو هم در زير نوشتم . ممنون از ITpro

<div class="scroll-box" style="width:400px; height:100px; background:#464749; overflow-x:scroll; overflow-y:hidden; position:absolute;">

        <div class="box-1" style="width:100px; height:100px; background:#ff6600; position:relative; float:right;"></div>

        <div class="box-2" style="width:100px; height:100px; background:#ff9900; position:relative; float:right;"></div>

        <div class="box-3" style="width:100px; height:100px; background:#ff6600; position:relative; float:right;"></div>

        <div class="box-4" style="width:100px; height:100px; background:#ff9900; position:relative; float:right;"></div>

        <div class="box-5" style="width:100px; height:100px; background:#ff6600; position:relative; float:right;"></div>

        <div class="box-6" style="width:100px; height:100px; background:#ff9900; position:relative; float:right;"></div>

        <div class="box-7" style="width:100px; height:100px; background:#ff6600; position:relative; float:right;"></div>

</div>