반응형시 여백 문제 ㅠㅠ 채택완료

http://company14.giresvenin.gethompy.com/about_test.php

반응형시 줄이면 왜 꽉차게 안 줄여지고 양옆 여백이 생기면서 같이 줄어들까요 ?ㅠㅠㅠ 이유 아시는분 ㅠㅠㅠㅠㅠㅠ 화면 꽉차게 해야합니다 ㅠㅠ 

<style>
*{margin:0; padding:0; box-sizing: border-box;}
p{color:#333; font-weight: 500;}
a{text-decoration:none; color:#333; display:block;}
img{display:block; max-width:100%;}

body{font-family: 'Noto Sans KR', sans-serif; width: 100%; overflow-x: hidden; max-width: 420px; margin: 0 auto;}
.chat__wrap{ width: 100%; }
.chat__wrap .chat__header{background:#005B31; border-radius:0 0 26px 26px; padding:18px 20px; position:relative; box-shadow : 0px 4px 16px 0px rgba(0, 91, 49, 0.2);}
.chat__wrap .chat__header .left__box{display:flex; align-items:center; gap:8px;}
.chat__wrap .chat__header .left__box .text__wr .hd__text{font-size:12px; color:#FFF6ED; margin-top: 5px;}
.chat__wrap .chat__header .close_btn{position:absolute; right:26px; top:50%; transform:translateY(-50%);} 

.chat__conversation__box{ height:100vh; padding:28px 18px; background:#fff; display:flex; flex-direction: column;}

.chat__conversation__box .que__box{display:block; margin-right: auto;}
.chat__conversation__box .anw__box{ display:block; }
.chat__conversation__box .que__box .que__title{margin-bottom:12px;}
.chat__conversation__box .que__box .que__title > p{font-size:13px; color:#333; font-weight:700;}
.chat__conversation__box .que__box.que__title__box .que__text{border-radius:12px; border:1px solid #D8D8D8; display: inline-block;}
.chat__conversation__box .que__box .que__text .anw__text{font-size:13px; color:#333;}
.chat__conversation__box .que__box.que__title__box .que__text .anw__text{border-bottom:1px solid #D8D8D8; font-size:13px; color:#333; padding:15px 12px; display: flex;align-items: center;gap: 4px;}

    
.chat__conversation__box .que__box .que__text .anw__text:last-child{border-bottom:0;}
.chat__conversation__box .anw__box{margin:28px 0; margin-left: auto;}
.chat__conversation__box .anw__box .anw__text{display:inline-block; font-size:13px; color:#333; background-color:#DFEBE2; padding:10px 12px; border-radius:12px;}
.chat__conversation__box .que__box.que__title__box02{display:block;}
.chat__conversation__box .que__box.que__title__box02 .que__text{background-color:#F2F2F2; display: inline-block; padding:10px 12px; border-radius:12px;}
.chat__conversation__box .pro__box{ display:flex; align-items:center; margin-top: 12px; align-items: center;}
.chat__conversation__box .pro__box .pro__list__box{margin-right: 8px; border-radius:12px; border:1px solid #D8D8D8; padding:22px 6px; display:inline-block;}

.chat__conversation__box .pro__box .more__btn{display:inline-block; color:#333; font-size:20px;}

.chat__send__box{padding:12px 18px; position:relative; display:flex; width: 100%;}
.chat__send__box .inbox{background:rgba(1, 91, 49, 0.1); border-radius:12px; width:100%;}
.chat__send__box #send{font-family: 'Noto Sans KR', sans-serif; resize: none; font-size:14px; color:rgba(51, 51, 51, 0.5); width:100%; border:0; padding:14px 80px 14px 16px; background:transparent;}

.chat__send__box button{background-color: #fff; border:0; border-radius:10px; width:28px; height:28px; position:absolute; right:34px; top:20px;}
.chat__send__box button > img{}

</style>

css 입니다 ㅠㅠ