display:table-cell with gutter

Horizontal lists display are table-cell. These has transparent background-color, and box-shadow : inset.

.wrap {	margin: 3em auto;
	width: 30em;
	font-size: 1.5em; }
	
ul {	margin: 1em 0 1em -0.5em;
	padding: 0; }
	
li {	display: table-cell;
	height: 5em;
	width: 5em;
	padding-left: 1em;
	text-align: center;
	line-height: 1;
	vertical-align: middle;
	background: transparent;
	box-shadow: -5em 0 0 rgba(17,63,17,0.8) inset; }
	
li:nth-child(even) {
	box-shadow: -5em 0 0 rgba(0,33,0,0.8) inset; }