.flex-container { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; height: 100%; width: 100%; section { overflow: hidden; margin: 3px; padding: 2px; color: #eeeeee; background-color: #23262d; ul { li { display: flex; padding: 5px; .cont { font-size: 16px; } } } } } #secA { height: 32%; } #secB { height: 32%; ul.title{ height: 100%; margin-bottom: 0; li{ font-weight: 800; font-size: 18px; writing-mode: vertical-lr; } } } #secC { position: relative; height: 32%; } #weather { margin-right: 200px; height: 100%; #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; .time { text-align: center; height: 20px; } .pic { width: 80px; margin: 0 auto; img{ width: 100%; } .feelTemper { text-align: center; font-size: 28px; font-weight: bold; } } .otherWeather { height: 20px; padding-left: 6px; span { display: inline-block; width: 48%; text-align: center; } } }