.contact{ width: 100%; padding: 110px 0; background-image: url(../img/cbg.jpg); float: left; } .contact_list{ width: 1200px; float: left; margin-left: calc((100% - 1200px)/2); } .contact_lists{ width: 20%; float: left; } .contact_lists img{ width: 161px; height: 161px; float: left; margin-left: calc((100% - 161px)/2); } .contact_lists span{ display: inline-block; width: 100%; text-align: center; float: left; color: #1b1a1a; } .contact_lists span:nth-child(2){ font-weight: bold; margin-top: 30px; font-size: 20px; } .contact_lists span:nth-child(3){ font-size: 18px; margin-top: 16px; width: calc(100% - 20px); margin-left: 10px; } @media screen and (min-width: 0px) and (max-width: 1459px) { .contact{ width: 100%; padding: 110px 0; background-image: url(../img/cbg.png); float: left; } .contact_list{ width: 860px; float: left; margin-left: calc((100% - 860px)/2); } .contact_lists{ width: 20%; float: left; } .contact_lists img{ width: 161px; height: 161px; float: left; margin-left: calc((100% - 161px)/2); } .contact_lists span{ display: inline-block; width: 100%; text-align: center; float: left; color: #1b1a1a; } .contact_lists span:nth-child(2){ font-weight: bold; margin-top: 30px; font-size: 20px; } .contact_lists span:nth-child(3){ font-size: 18px; margin-top: 16px; width: calc(100% - 40px); margin-left: 20px; } }