<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;}