How to make the ul element in div adaptive

website mobile testing, found that the right side of the merit list content is crowded together.
how do I adjust so that div+ul+li adapts to the screen width?

Dec.22,2021

you can use this method to write code adaptively on the installation screen:
above 1280 resolution (greater than 1200px)

@ media screen and (min-width:1200px) {

-sharppage{ width: 1100px; }-sharpcontent,.div1{width: 730px;}-sharpsecondary{width:310px}

}

1100 resolution (greater than 960px, less than 1199px)

@ media screen and (min-width: 960px) and (max-width: 1199px) {

-sharppage{ width: 960px; }-sharpcontent,.div1{width: 650px;}-sharpsecondary{width:250px}select{max-width:200px}

}

880resolution (greater than 768px, less than 959px)

@ media screen and (min-width: 768px) and (max-width: 959px) {

-sharppage{ width: 900px; }-sharpcontent,.div1{width: 620px;}-sharpsecondary{width:220px}select{max-width:180px}

}

720 resolution (greater than 480px, less than 767px)

@ media only screen and (min-width: 480px) and (max-width: 767px) {

-sharppage{ width: 450px; }-sharpcontent,.div1{width: 420px;position: relative; }-sharpsecondary{display:none}-sharpaccess{width: 450px; }-sharpaccess a {padding-right:5px}-sharpaccess a img{display:none}-sharprss{display:none}-sharpbranding -sharps{display:none}

}

resolution below 440 (less than 479px)

@ media only screen and (max-width: 479px) {

-sharppage{ width: 300px; }-sharpcontent,.div1{width: 300px;}-sharpsecondary{display:none}-sharpaccess{width: 330px;} -sharpaccess a {padding-right:10px;padding-left:10px}-sharpaccess a img{display:none}-sharprss{display:none}-sharpbranding -sharps{display:none}-sharpaccess ul ul a{width:100px}

}
screenshot to show you the code
clipboard.png
.]

Menu