.box-wrap { max-width: 670px; min-width: 332px; margin: 30px auto; overflow: auto; padding: 0; } .box { background: white; border: 1px solid #98E; width: 330px; margin: 8px 0; padding: 0; } .box ul { padding: 2px 15px; } .box ul li { list-style: none; margin: 0; } .box.left { background: #FDF6AF; color: #9E914F; border: 1px solid #9E914F; float: left; } .box.right { background: #F2DCE5; color: #525; border: 1px solid #CA759E; float: right; } .box h2 { padding: 3px 7px; font-size: 12pt; } .box img { float: none; margin: 10px auto; } .box.left h2 { background: #FEE78F; color: #9E914F; } .box.right h2 { background: #EB81B4; color: #F8F8F8; } body { background: #F7F8F9; } header div.subtitle, h1 { color: #888A8C; } @media screen and (max-width: 696px) { .box-wrap { overflow: visible; } .box { width: 100%; } .box ul { text-align: center; } }