*{margin:0;padding:0;} body{ height: 100vh; width: 100vw; display: flex; } .cardContainer{ display: flex; justify-content: space-around; flex-wrap: wrap; height: 100%; width: 100%; box-sizing: border-box; padding: 25px; overflow-y: auto; } .card{ display: flex; flex-direction: column; justify-content: center; align-items: center; background: white; width: 300px; height: 300px; cursor: pointer; margin: 10px; padding: 25px; text-decoration: none; color: black; } .card:hover{ box-shadow: 0 0 3px black; } .card h2{ text-align: justify; } .card img{ margin-top: 10px; width: 90%; max-height: 150px; max-width: 150px; } .card p{ text-align: justify; } .card > *{ margin: 10px 0; } .sidebar{ display: flex; flex-direction: column; justify-content: space-around; align-items: center; background: #152730; height: 100vh; width: 25vw; color: #5FECE0; border-right: 1px solid white } .description{ background: #152730; color: #5FECE0; width: 100%; padding: 25px; box-sizing: border-box; font-size: 20px; text-align: justify; } .leeLinks a{ display: flex; color: #5FECE0; margin: 10px; } .leeLinks svg{ margin-right: 5px; } #menu{ display: flex; flex-direction: column; align-items: center; background: #152730; width: 100px; height: 100vh; } #menu > button{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100px; width: 100px; color: #5FECE0; cursor: pointer; background: none; border: none; } #menu .active{ background: rgb(196, 198, 192); cursor: default; color: #152730; } #main{ flex-direction: column; align-items: center; justify-content: space-around; background: rgb(196, 198, 192); height: 100vh; width: 75vw; }