how do I position the app to fit the page without any overlapping please? I’ve attached the css below
/* importing google fonts */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } .huge-div{ margin-top: 0px; margin-bottom: 150px; } ::selection{ color: #fff; background: #007bff; } .start_btn, .info_box, .quiz_box, .result_box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .info_box.activeInfo, .quiz_box.activeQuiz, .result_box.activeResult{ opacity: 1; z-index: 5; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .start_btn button{ font-size: 25px; font-weight: 500; color: #007bff; padding: 15px 30px; outline: none; border: none; border-radius: 5px; background: #fff; cursor: pointer; display: grid; place-items: center; } .info_box{ width: 100%; background: #fff; border-radius: 5px; transform: translate(-50%, -50%) scale(0.9); opacity: 0; pointer-events: none; transition: all 0.3s ease; position: absolute; } .info_box .info-title{ height: 60px; width: 100%; border-bottom: 1px solid lightgrey; display: flex; align-items: center; padding: 0 30px; border-radius: 5px 5px 0 0; font-size: 20px; font-weight: 600; } .info_box .info-list{ padding: 15px 30px; } .info_box .info-list .info{ margin: 5px 0; font-size: 17px; } .info_box .info-list .info span{ font-weight: 600; color: #007bff; } .info_box .buttons{ height: 60px; display: flex; align-items: center; justify-content: flex-end; padding: 0 30px; border-top: 1px solid lightgrey; } .info_box .buttons button{ margin: 0 5px; height: 40px; width: 100px; font-size: 16px; font-weight: 500; cursor: pointer; border: none; outline: none; border-radius: 5px; border: 1px solid #007bff; transition: all 0.3s ease; } .quiz_box{ width: 100%; background: #fff; border-radius: 5px; transform: translate(-50%, -50%) scale(0.9); opacity: 0; pointer-events: none; transition: all 0.3s ease; position: absolute; } .quiz_box header{ position: relative; z-index: 2; height: 70px; padding: 0 30px; background: #fff; border-radius: 5px 5px 0 0; display: flex; align-items: center; justify-content: space-between; box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1); } .quiz_box header .title{ font-size: 20px; font-weight: 600; } .quiz_box header .timer{ color: #004085; background: #cce5ff; border: 1px solid #b8daff; height: 45px; padding: 0 8px; border-radius: 5px; display: flex; align-items: center; justify-content: center; width: 120px; } .quiz_box header .timer .time_left_txt{ font-weight: 400; font-size: 17px; user-select: none; } .quiz_box header .timer .timer_sec{ font-size: 18px; font-weight: 500; height: 30px; color: #fff; border-radius: 5px; line-height: 30px; text-align: center; background: #343a40; border: 1px solid #343a40; user-select: none; } .timer_sec { padding-left: 5px; padding-right: 5px; } .quiz_box header .time_line{ position: absolute; bottom: 0px; left: 0px; height: 3px; background: #007bff; } section{ padding: 25px 30px 20px 30px; background: #fff; } section .que_text{ font-size: 25px; font-weight: 600; } section .option_list{ padding: 20px 0px; display: block; } section .option_list .option{ background: aliceblue; border: 1px solid #84c5fe; border-radius: 5px; padding: 8px 15px; font-size: 17px; margin-bottom: 15px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: space-between; } section .option_list .option:last-child{ margin-bottom: 0px; } section .option_list .option:hover{ color: #004085; background: #cce5ff; border: 1px solid #b8daff; } section .option_list .option.correct{ color: #155724; background: #d4edda; border: 1px solid #c3e6cb; } section .option_list .option.incorrect{ color: #721c24; background: #f8d7da; border: 1px solid #f5c6cb; } section .option_list .option.disabled{ pointer-events: none; } section .option_list .option .icon{ height: 26px; width: 26px; border: 2px solid transparent; border-radius: 50%; text-align: center; font-size: 13px; pointer-events: none; transition: all 0.3s ease; line-height: 24px; } .option_list .option .icon.tick{ color: #23903c; border-color: #23903c; background: #d4edda; } .option_list .option .icon.cross{ color: #a42834; background: #f8d7da; border-color: #a42834; } footer{ height: 60px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid lightgrey; } footer .total_que span{ display: flex; user-select: none; } footer .total_que span p{ font-weight: 500; padding: 0 5px; } footer .total_que span p:first-child{ padding-left: 0px; } footer button{ height: 40px; padding: 0 13px; font-size: 18px; font-weight: 400; cursor: pointer; border: none; outline: none; color: #fff; border-radius: 5px; background: #007bff; border: 1px solid #007bff; line-height: 10px; opacity: 0; pointer-events: none; transform: scale(0.95); transition: all 0.3s ease; } footer button:hover{ background: #0263ca; } footer button.show{ opacity: 1; pointer-events: auto; transform: scale(1); } .result_box{ background: #fff; border-radius: 5px; display: flex; padding: 25px 30px; width: 450px; align-items: center; flex-direction: column; justify-content: center; transform: translate(-50%, -50%) scale(0.9); opacity: 0; pointer-events: none; transition: all 0.3s ease; } .result_box .icon{ font-size: 100px; color: #007bff; margin-bottom: 10px; } .result_box .complete_text{ font-size: 20px; font-weight: 500; } .result_box .score_text span{ display: flex; margin: 10px 0; font-size: 18px; font-weight: 500; } .result_box .score_text span p{ padding: 0 4px; font-weight: 600; } .result_box .buttons{ display: flex; margin: 20px 0; } .result_box .buttons button{ margin: 0 10px; height: 45px; padding: 0 20px; font-size: 18px; font-weight: 500; cursor: pointer; border: none; outline: none; border-radius: 5px; border: 1px solid #007bff; transition: all 0.3s ease; } .buttons button.restart{ color: #fff; background: #007bff; } .buttons button.restart:hover{ background: #0263ca; } .buttons button.quit{ color: #007bff; background: #fff; } .buttons button.quit:hover{ color: #fff; background: #007bff; } .details-arrow { width: 25px; } .details-arrow:hover { cursor: pointer; } .que_text { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .details-block img{ transition: all 0.4s; user-select: none; } .details-block { padding: 10px; } .question-image-cover{ margin: 10px; display: flex; justify-content: center; }