<!doctype html>
<head>
<style>
body{
background: #202020;
}
.center {
display: flex;
justify-content: center;
margin-top: 40px;
}
.center2 {
display: flex;
justify-content: center;
list-style: none;
width: 620px;
box-shadow: 0px 3px 4px #000;
}
.contenedor1,.contenedor2,.contenedor3,.contenedor4 {
background: #222222;
width: 152px;
}
.contenedor1 li,.contenedor2 li,.contenedor3 li,.contenedor4 li {
padding: 2px;
}
.contenedor1 li {
margin: 0px 0px 0px 2px;
}
.contenedor1 li div,.contenedor2 li div,.contenedor3 li div,.contenedor4 li div {
color: #777;
background: #222222;
padding: 7px;
}
.contenedor1 li div {
color: #777;
border-bottom: 1px solid #EF0404;
border-right: 1px solid #EF0404;
}
.contenedor2 li div {
color: #777;
border-bottom: 1px solid #EF0404;
margin: 0 -4px;
}
.contenedor3 li div {
color: #777;
border-bottom: 1px solid #EF0404;
border-right: 1px solid #EF0404;
}
.contenedor3 li {
margin: 0px 0px 0px 2px;
}
.contenedor4 li div {
color: #777;
border-bottom: 1px solid #EF0404;
margin: 0 -4px;
}
.contenedor4 li {
margin: 0px 2px 0px 0px;
}
</style>
</head>
<body>
<div class='center'>
<div class='center2'>
<div class='contenedor1'>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
</div>
<div class='contenedor2'>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
</div>
<div class='contenedor3'>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
</div>
<div class='contenedor4'>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
</div>
</div>
</div>
</body>
</html>