body { font-family: sans-serif; margin: 0; } .mainContainer { width: 1024px; margin: auto; } .mainContainer > h1 { text-align: center; } nav { display: flex; overflow: hidden; background-color: #93ff83; } nav > a { flex: auto; display: block; float: left; padding: 20px; box-sizing: border-box; text-decoration: none; font-weight: bold; color: inherit; text-align: center; background-color: transparent; transition: background-color 0.2s; } nav > a.current { background-color: #5db9ef; } nav > a:hover { background-color: rgba(0, 0, 0, 0.2); } nav > a.current:hover { background-color: #5397ca; } nav > a:visited { color: inherit; } .margin { margin: 15px; } nav > a > div { position: relative; top: 50%; transform: translateY(-50%); overflow: hidden; } .thumbnails { text-align: center; overflow: hidden; } .thumbnails > a { display: block; box-sizing: border-box; float: left; width: 25%; height: 200px; padding: 5px; } .thumbnails > a > div { box-sizing: border-box; height: 100%; border-radius: 5px; font-size: 24px; padding-top: 20px; } .c1 { color: aliceblue; background-color: darkred; } .c2 { color: aliceblue; background-color: midnightblue; } .c3 { color: aliceblue; background-color: indigo; } .c4 { color: aliceblue; background-color: seagreen; }