.container { display: flex; flex-wrap: wrap; justify-content: space-between; } .row { width: 100%; display: flex; justify-content: space-between; } .column { flex: 1; padding: 1em; } .column.half { flex: 0.5; } .column.third { flex: 0.333; } .column.quarter { flex: 0.25; } .centered-container { display: flex; justify-content: center; align-items: center; height: 100vh; // this makes the container take up the full viewport height } .colonel { margin: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; *{ margin-top: 50px; } }