cuatro casillas: pon 2 en cada fila

Tengo 4 cajas y quiero ponerlas 2 x 2, pero no puedo entender cómo hacerlo.

He creado un jsfiddle aquí

El problema que estoy teniendo es que uno de los cuadros está arriba, y los otros tres están abajo.

Quiero que se vea así

enter image description here

Mi código es el siguiente por conveniencia.

html

css

 body{ height: 2000px; } .wrap { height: 100%; position: relative; overflow: hidden; } .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/167792/mountains_copy.jpg') no-repeat center center; background-size: cover; transform: scale(1.1); } .employee-box { background-color: red; height: 250px; width: 250px; } .employee-1 { background: yellow; } .employee-2 { background: pink; } .employee-3 { background: green; } /* entire container, keeps perspective */ .flip-container { perspective: 1000px; display: inline-block; } .container-border{ border: 1px solid #ccc; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { width: 250px; height: 250px; } /* flip speed goes here */ .flipper { transition: 0.8s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); } /* back, initially hidden pane */ .back { transform: rotateY(180deg); background-color: #fff; } 

deberías agregar float: izquierda; o pantalla: bloque en línea; en la 1ra caja.

Por ejemplo:

 .employee-box{ float: left; } 

Flotante: se deja en .employee-box y .flip-container los pondrá en posición.

Puede otorgarle un ancho al contenedor principal y configurar cada casilla en bloque en línea , flotar o incluso usar flex :

Ejemplo de bloque en línea:

 body{ height: 2000px; } .wrap { height: 100%; position: relative; overflow: hidden; } .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: url('http://sofes.miximages.com/html/mountains_copy.jpg') no-repeat center center; background-size: cover; transform: scale(1.1); } .main-container.artists { width:510px; text-align:center; margin:auto; } .employee-box { background-color: red; height: 250px; width: 250px; display: inline-block; } .employee-1 { background: yellow; } .employee-2 { background: pink; } .employee-3 { background: green; } /* entire container, keeps perspective */ .flip-container { perspective: 1000px; display: inline-block; } .container-border{ border: 1px solid #ccc; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { width: 250px; height: 250px; } /* flip speed goes here */ .flipper { transition: 0.8s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); } /* back, initially hidden pane */ .back { transform: rotateY(180deg); background-color: #fff; }