#wrapper { width: 100%; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; } #header { padding: 15px 0; background:rgb(216, 186, 53); } main { display: flex; flex-grow: 1; } .header_content nav { display: flex; justify-content: space-between; align-items: center; } nav .items { display: flex; padding: 35px 20px; } nav .items li { list-style-type: none; margin-left: 10px; font-size: 23px; } nav img { display: flex; width: 250px; padding: 27px 20px; } .content { display: flex; flex-direction: column; text-align: center; width: 100%; max-width: 1380px; margin: 0 auto; padding-right: 40px; } .content p { font-size: 27px; padding: 35px; text-align: center; } h1 { font-size: 35px; text-align: center; } .list { display: flex; flex-wrap: wrap; list-style: none; width: 100%; align-items: stretch; justify-content: space-between; } .list li { display: flex; width: calc(100% / 3); padding: 10px; } .list_box { display: flex; border: 2px solid black; border-radius: 10% 10%; flex-direction: column; width: 100%; padding: 15px; } .list_body { flex-grow: 1; } .list_box img { align-self: center; width: 130px; border-radius: 50% 50%; border: 14px solid #c8b8b8; overflow: hidden; } .list_body p { font-size: 20px; } h2 { margin-bottom: -30px; } .list_box a { padding: 10px 30px; align-self: center; border-radius: 20px; text-decoration: none; background: #7a6586; color: white; } .list_box a:hover { background: #fd644c; } aside { width: 210px; text-align: center; padding: 10px; font-size: 20px; } .one { order: -1; background: rgb(216, 148, 176); } .two { background: rgb(95, 161, 223); } .holder { display: flex; flex-wrap: wrap; width: 500px; height: 150px; border: 2px solid black; border-radius: 30px 30px 0 0; overflow: hidden; margin: 50px auto 0px; } .item { display: flex; justify-content: center; flex-direction: column; text-align: center; } .item:first-child { width: 50%; background: #fd644c; order: -2; } .item:nth-child(2) { background: #2977b3; order: 1; } .item:nth-child(3) { background: #663498; } .item:nth-child(2), .item:nth-child(3), .item:nth-child(4) { width: calc(100% / 3); } .item:nth-child(4) { background: #057c1f; order: 2; } .item:last-child { width: 50%; background: #fda524; order: -1; } footer { display: block; margin-top: auto; height: 50px; text-align: center; background:rgb(99, 233, 66); } h4 { font-size: 20px; }