.box{ height: 100%; width: 100%; background: url(images/content.png); background-repeat: no-repeat; background-size: 100% 100%; /* position: relative; */ } .answertotalContent{ position: relative; background-color: #FFFFFF; height: 70%; top: 25%; width: 93%; margin: 0 auto; border-radius: 10px; } .answertotalTopic{ width: 175px; height: 175px; box-shadow: #e8e7e7 0px 0px 4px 2px ; border-radius: 50%; position: relative; top: 35%; left: 50%; transform: translate(-50%,-50%); display: flex; justify-content: center; align-items: center; } .answertotaScore{ width: 145px; height: 145px; border: 3px solid #f5e285; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction:column; } .answertotaScore span{ color: #b0afaf; font-size: 15px; } .answertotaScore p{ color: #404040; font-size: 35px; font-weight: 800; } .answertotalLookButton{ width: 80%; float: none; position: absolute; bottom: 0%; left: 50%; transform: translate(-50%,-50%); } .answertotalLookButton p{ background-color: #e1bb53; margin: 0 auto; color: #FFFFFF; border-radius: 25px; font-size: 18px; color: #FFFFFF; width: 80%; height: 36px; text-align: center; line-height: 36px; margin-bottom: 10px; } .answertotalLookButton p:last-child{ border: 1px solid #e1bb53; background-color: #FFFFFF; color: #e1bb53; }