Problema de varias columnas con desplazamiento horizontal

Tengo un div principal (principal) con el desbordamiento horizontal configurado en automático. Luego tengo un elemento secundario (columnas) que tiene todas mis propiedades de columna en él. El problema es que una vez que el contenido va más allá de la ventana gráfica, ya no puedo controlar los márgenes o el relleno de la derecha, ya que la columna solo parece llegar hasta la ventana gráfica. Por ejemplo, cuando coloco un color de fondo en "columnas", el fondo solo llega hasta el borde de la ventana gráfica aunque el contenido se desplace más allá de eso.

.main {
    overflow-x: visible;
    overflow-y: hidden;
    width: 100%;
}
.columns {
    background: red;
    column-fill: auto;
    column-width: 670px;
    column-gap: 80px;
    height: 120px;
    padding: 20px;
    width: auto;
}

<div class="main">
     <div class="columns">
           <p></p>
           <p></p>
           <p></p>
           <p></p>
           <p></p>
     </div>
</div>

Aquí hay un ejemplo:http://jsfiddle.net/fyG24/

Respuestas a la pregunta(2)

Su respuesta a la pregunta