Aquí tengo una respuesta (Que modifica un poco tu código css) para que funcióne:
.contenedor {
-webkit-clip-path: polygon(0 0, 100% 17%, 100% 83%, 0% 100%);
clip-path: polygon(0 0, 100% 17%, 100% 83%, 0% 100%);
background-color: black;
min-height: 180px;
padding: 100px 30px;
}
.contenido {
/*Cosas nuevas agregadas.*/
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
/*Fin cosas nuevas agregadas*/
background-color: #fff;
color: #000;
height: 180px;
padding: 50px;
}
#inner {
display: inline-block; // Otra cosa que se agrego
width: calc(50% - 40px); //Aquí te falto calcular el 50% sin el padding
background: black;
border-radius: 5px;
padding: 40px;
}
@media screen and (max-width: 480px) {
#inner {
display: block;
width: calc(100% - 80px);
}
}
Voy a expicar entonces un poco lo que ha cambiado...
Como veras puse:
display: flex;
justify-content: center;/*Este*/
align-items: center;/*Este*/
flex-grow: 1;/*Este*/
flex-flow: row wrap;/*Y este otro solo se pueden usar con display: flex*/
display flex, es un css comúnmente llamado o reconocido como: "Flexbox", este se usa en el llamado "pocisionamiento de cajas" en css, y es muy usado cuando requieres hacer una pagina responsive design (Es decir adaptable a dispositivos moviles).
En nuestro caso para poder identificar donde debemos poner el:
display: flex;
y los demás atributos, basta con saber cual es el contenedor "padre", de los elementos "hijos", a los que les queremos ya sea "centrar", verticalmente, horizontalmente u ambas o si los queremos poner uno al lado del otro, esto ya dependerá del usuario.
En nuestro caso, el contenedor padre de nuestros elementos hijos ¿Cuál sería?, muy sencillo, es .contenido, que es el contenedor mas cercano jerargicamente a sus hijos.
Entonces a este ya sabemos que le deberemos poner:
display: flex;
y sus otros atributos...
Hay muchas maneras diferentes de centrado y alineación con flexbox, para ver algunas de estas posiciones y formas de distribuir elementos, te recomiendo consultar el siguiente enlace:
Flexbox
Bien, siguiendo con la explicación, sin mas, como habrás notado (Si visitaste el link de flexbox), te habrás dado cuenta que:
justify-content: center;
lo que hace es alinear todo el contenido hacia el centro horizontalmente, este no deja espacios, por lo que si quieres ponerle espacios entre cada elemento, deberás usar otra distribución de justify-content: center; o bien, simplemente añadirle un margin a todos los elementos que tengan el id #inner, excepto al ultimo.
align-items: center;
Este de aquí hace lo mismo que el anterior, pero la diferencia es que alinea verticalmente y no horizontalmente, el resultado de combinar ambos es que estarán alineados todos los elementos hijos tanto horizontal como verticalmente.
flex-flow: row wrap;
flex-flow, es la abreviación de en realidad dos atributos que se pueden definir aparte, es como "la combinación de estos", separados, estos dos son:
flex-direction: row;
flex-wrap: wrap;
uniendolos quedaria:
flex-flow: row wrap;
El primer parámetro "row", define de que modo se distribuyen los objetos en ese contenedor y también por tanto de que forma se alinean, en este caso "row", es fila en ingles, por lo que su distribuición sera en fila, y wrap, define si el elemento no cabe en el contenedor padre, este lo que hará es desplazar los demás divs hacia abajo.
Por supuesto row y wrap no son los unicos valores que se pueden tomar, hay muchos, entre estos estan: row wrap, row no-wrap, row reverse, etc.
Por ultimo:
a inner, es necesario añadirle:
display: inline-block;
Ya que según lo que llevo trabajando con flex-box, he aprendido que si quieres alinear bien tu contenido debes usar inline-block, ya que inline, inutiliza a flexbox, inline-block le permite hacer a flex-box lo que necesitas que haga, y block el problema consiste en que el tamaño del div será igual al de su contenedor padre, por lo tanto al no haber espació, siempre se alinearan uno abajo del otro (Y esto no es lo que quieres).
Que por cierto vi que tu div como predeterminado tenia display: block, por esta razón fue necesario añadir esa linea, si tus contenedores hubieran tenido como predeterminado display: inline-block, hubieramos podido saltarnos poner: display: inline-block en #inner.
flex-grow: 1;
Flex grow determina si un elemento puede abarcar todo el ancho de un elemento o no, es decir "si puede crecer", colocar 0 significa que no puede heredar este comportamiento, colocar 1 significa que puede hacerlo.
intenta colocando flex-grow: 1, en .contenido
¡Espero mi respuesta te halla ayudado!, ¡exitos!
Posdata: como dice alguien que ya respondio la pregunta: Si, es cierto que es mejor ponerle una clase a #inner, y utilizar la clase en vez del id en CSS, ya que como el dice, estas usando css en varios elementos, no solo uno, y el id, se supone que deberia ser unico para cada elemento!, para eso existen las clases :)