body{ background: antiquewhite; color: saddlebrown; } h1{ color: saddlebrown; text-align: center; } h2{ color: cadetblue; } ul{ list-style:none; padding-left: 0; } nav{ height: 400px; width: 100%; margin: 0 auto; } #main_nav{ width: 50%; min-width:700px; height: 400px; overflow: hidden; margin: 0 auto; padding: 95px 0; text-align: center; } #main_nav li{ display: inline-block; height: 200px; width: 200px; border-radius: 50%; position: relative; background-color: white; margin: 0 10px; } #main_nav li:hover{ background-color: mintcream; } #main_nav li:after{ content: ""; display: block; position: absolute; bottom: 25px; right: 0; left: 0; width: 20px; height: 20px; margin: auto; border-right: 3px solid; border-bottom: 3px solid; transform: rotate(45deg); } #main_nav a{ color: saddlebrown; font-size: 1.3rem; position: absolute; top: 0; left: 0; width: 100%; border-radius: 50%; text-align: center; padding: 80px 0 90px; text-decoration: none; } .shopname{ margin-left: 1em; border-left-style: solid; border-width: thick; padding-left: 5px; } .shop{ border-top-style: solid; border-bottom-style: solid; padding: 5px; text-align: center; } .shopkinds{ overflow: hidden; padding: 10px 0; text-align: center; } .shopkinds li{ background-color: tan; display: inline-block; height: 300px; width: 300px; position: relative; min-width:700px; } .shopkinds li:hover{ background-color: mintcream; } .shopkinds a{ color: saddlebrown; font-size: 1.3rem; position: absolute; top: 0; left: 0; width: 100%; text-align: center; padding: 125px 0 125px; text-decoration: none; } .kinds{ border-top-style: solid; border-bottom-style: solid; padding: 5px; text-align: center; } .place{ border-top-style: solid; border-bottom-style: solid; padding: 5px; text-align: center; }