body{ display: flex; flex-direction: column; align-items: center; } ol{ list-style: decimal inside none; } ol > *{ margin: 10px; } .content{ padding: 50px; width: 75%; } .content > *{ margin: 15px; } /* HELP PAGE */ .helpMenu{ position: fixed; top: 75px; left: 0; padding: 100px 50px; } .helpMenu ul{ list-style-type: none; } .indent{ margin-left: 20px; } .helpContent{ text-align: center; width: 50%; padding: 50px; } .helpContent h2, .helpContent h3, .helpContent h4{ margin: 20px 0; } .helpContent h2{ font-size: 25px; } .helpContent p{ margin: 15px 0; text-align: left; font-size: 20px; } @media screen and (max-width: 1400px){ @media (orientation: portrait){ .helpMenu{ position: static; padding: 0; } .helpContent{ padding: 0; width: 90%; } .helpContent h2, .helpContent h3, .helpContent h4{ text-align: center; } .helpContent p{ text-align: justify; } .content{ width: 90%; } } @media (orientation: landscape){ body{ align-items: flex-end; } .helpMenu{ position: absolute; margin: 0; padding: 10px 25px; width: 25%; } .helpContent{ margin: 0; padding: 10px; width: 65%; } } }