.flex-container { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; height: 100%; width: 100%; } .flex-container section { overflow: hidden; margin: 3px; padding: 2px; color: #eeeeee; background-color: #23262d; } .flex-container section ul li { display: flex; padding: 5px; } .flex-container section ul li .cont { font-size: 16px; } #secA { height: 32%; } #secB { height: 32%; } #secB ul.title { height: 100%; margin-bottom: 0; } #secB ul.title li { font-weight: 800; font-size: 18px; writing-mode: vertical-lr; } #secC { position: relative; height: 32%; } #weather { margin-right: 200px; height: 100%; } #weather #weatherArea { margin: auto 0; } #clock { position: absolute; top: 0; right: 0; width: 200px; background-color: #0055a6; height: 100%; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-around; } #clock .time { text-align: center; height: 20px; } #clock .pic { width: 80px; margin: 0 auto; } #clock .pic img { width: 100%; } #clock .pic .feelTemper { text-align: center; font-size: 28px; font-weight: bold; } #clock .otherWeather { height: 20px; padding-left: 6px; } #clock .otherWeather span { display: inline-block; width: 48%; text-align: center; } /*# sourceMappingURL=msg_list.css.map */