Edit in JSFiddle


              
<ul id="wrap">
    <li class="box1 a"><p>ABCDEFG</p></li>
    <li class="box1 b"><p>HIJKLMN</p></li>
    <li class="box1 c"><p>OPQRSTU</p></li>
</ul>
<ul id="wrap">
    <li class="box2 d"><p>ABCDEFG</p></li>
    <li class="box2 e"><p>HIJKLMN</p></li>
    <li class="box2 f"><p>OPQRSTU</p></li>
    <li class="box2 g"><p>VWXYZ</p></li>
</ul>
#wrap{width:100%;display:flex;justify-content: center;padding:0;list-style: none;}
.box1{width:calc(100% / 3);margin:2px;}
.box2{width:calc(100% / 4);margin:2px;}
.box1:hover, .box2:hover{opacity:0.8;}
p{text-align:center;color:#fff;font-weight:bold;}
.a{background-color:#508991;}
.b{background-color:#172A3A;}
.c{background-color:#004346;}
.d{background-color:#FFA69E;}
.e{background-color:#FF7E6B;}
.f{background-color:#8C5E58;}
.g{background-color:#A9F0D1;}