Como posso fazer com que os quadrados fiquem em apenas uma linha, gerando um scroll horizontal, onde eu possa navegar para os outros blocos deslizando para esquerda ou direita.
.box{
width: 100px;
height: 100px;
display: inline-block;
}
.box:nth-child(1) { background: red; }
.box:nth-child(2) { background: orangered; }
.box:nth-child(3) { background: purple; }
.box:nth-child(4) { background: yellow; }
.box:nth-child(5) { background: green; }
.box:nth-child(6) { background: black; }
.box:nth-child(7) { background: orange; }
.box:nth-child(8) { background: orangered; }
.box:nth-child(9) { background: purple; }
.box:nth-child(10) { background: yellow; }
.box:nth-child(11) { background: red; }
<div class=itens>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.itens{ display: inline-flex;}