*{ margin:0; padding: 0; } body{ background:url("../image/sendcode_bg.jpg"); width: 100%; height: 100%; } nav{ height: 80px; position: fixed; top: 0; left: 0; right: 0; } .d-flex .search-input{ width: auto; } /* body .species-card .list{ width: 1400px; display: flex; margin:50px auto; flex-wrap: wrap; justify-content: center; } body .species-card .list .Image-text .images{ width: 320px; height:220px; background-color:white; border-radius: 10px; margin-top: 14px; margin-left: 5px; margin-right: 5px; box-shadow: 0 0 10px #dedede; list-style: none; border-radius: 5px; transition: all .2s; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; text-align: center; vertical-align:middle; } body .species-card .list .Image-text .images img{ max-width: 300px; max-height: 200px; display: block; text-align: center; margin-top: auto; margin-bottom: auto; } body .species-card .list .Image-text .subtitle{ width: 320px; height: 90px; text-align: center; background: white; margin-left: 5px; margin-right: 5px; border-radius: 10px; margin-top: -10px; } .title{ font-size:28px; color:#333333; text-decoration: none; } .smalltitle{ font-size: 20px; color: #b0b0b0; margin-top: 10px; margin-bottom: 10px; } .list p{ text-align: center; margin: 0%; padding: 0%; } .list .images:hover, .list .subtitle:hover{ box-shadow: 0 10px 20px #aeaeae; transform:translateY(-5px); } */