我編寫了一段應該顯示標題的小代碼。這些標題由 3 部分組成，中間是文本，左右各 2 行（圖 1）。如果我現在更改屏幕的寬度，對象就會相互結合（圖 2）。我希望它們能夠適應頁面的大小，并使線條和文本變小。僅計算機視圖。html {    height: 100%;    font-family: 'Montserrat' sans-serif;    display: grid;    align-items: center;    justify-items: center;/*---------------------------------------------------------------------------*//*---------------------------------------------------------------------------*/    --bg: #333333;    --bg-panel: #434343;    --color-headings: #3694FF;    --color-text: #ffffff;}html[data-theme='dark'] {    --bg: #FCFCFC;    --bg-panel: #EBEBEB;    --color-headings: #0077FF;    --color-text: #333333;}/*---------------------------------------------------------------------------*//*---------------------------------------------------------------------------*/a{text-transform: uppercase; text-decoration: none; font-weight: bold; font-size: 1.1em; font-family: 'Montserrat', sans-serif;}hr{width: 10%; height: 4px; background: var(--color-headings); border: 0; margin: 0;}h1, h2, h3, p, a, ul li{font-family: 'Montserrat', sans-serif; color: var(--color-text)}header{position: fixed; float: left; margin: 0; padding: 0; border: 0}body{background-color: var(--bg);}ul li{list-style-type: none;}h2{text-align: center}/*---------------------------------------------------------------------------*//*---------------------------------------------------------------------------*/.header{  margin-top: 5%;  width: 100%;}.header ul{  list-style-type: none;  margin: 0 auto 0 auto;  padding: 0;  width: 50%;  float: none;  border-left: 25%;  border-right: 25%;}.header ul li{  width: 32%;  float: left;  margin-bottom: 1%;  margin-left: 0.5%;  margin-right: 0.5%;  margin-top: 15%;}.header ul li hr{  width: 100%;  float: none;  margin: 0;  margin-left: auto;  margin-right: auto;  margin-top: 8%;  margin-bottom: 10%;}.header ul li h1{  margin: 0;  float: left;  margin-left: 10%;  margin-right: 10%;  width: 100%;}請幫助我，我不知道如何解決這個問題。提前致謝圖 1 圖 2