body { background-color: #f2f2f2; } /*.column { float: left; width: 50%; }'/ /* Split the screen in half */ /*.split { height: 100%; width: 50%; position: fixed; z-index: 1; top: 0; overflow-x: hidden; padding-top: 20px; } /* Control the left side */ /*.left { left: 0; background-color: white; } /* Control the right side */ /*.right { right: 0; background-color: white; } .column { float: left; width: 33.33%; } .top { height: 50vh; background-color: #f1f1f1; } .bottom { height: 50vh; background-color: #f1f1f1; }*/ /* If you want the content centered horizontally and vertically */ .centered { position: absolute; top: 50%; left: 40%; transform: translate(-50%, -50%); text-align: center; margin: 10; } .header_centered { position: absolute; top: 8%; left: 50%; transform: translate(-50%, -50%); text-align: center; margin: 10; } .thick-border { border: 3px solid black; border-collapse: collapse; } /* Style the image inside the centered container, if needed */ .centered img { max-width: 140%; } .container { display: flex; } .column { flex: 1; /*for demo purposes only */ background: #f2f2f2; border: 1px solid #e6e6e6; box-sizing: border-box; } .column-one { order: 1; } .column-two { order: 2; } .column-three { order: 3; }