我编写了一段应该显示标题的小代码。这些标题由 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