body { display: flex; } html, body { height: 100%; width: 100%; margin: 0; } #menu { list-style-type: none; margin: 0; padding: 0; width: 220px; background-color: #f1f1f1; height: 100%; overflow: auto; flex-grow: 0; } #menu a { display: block; color: #000; padding: 10px 20px; text-decoration: none; } #menu a.active { background-color: #4CAF50; color: white; } #menu a:hover:not(.active) { background-color: #555; color: white; } #menu-logo img { width: calc(100% - 40px); margin: 40px auto; display: block; } #main-container { margin: 0; flex-grow: 1; height: 100%; overflow-y: scroll; } #main-content { padding-top: 100px; padding-bottom: 100px; margin: 0 auto; max-width: 1000px; text-align: justify; } @media only screen and (max-width: 700px) { body { flex-direction: column; height: auto; } #menu { height: auto; width: 100%; padding-bottom: 20px; } #menu-logo img { height: 70px; padding-left: 7px; } #menu a { text-align: center; } #main-content { padding: 100px 16px; } }