对象合并并忽略水平边距，填充等

Question

我写了一个小代码，应该显示标题。这些标题包括3个部分，中间的文本和左右两行（图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%;
}

h2{
  width: 100%;
  float: none;
}

<div class="header">
  <ul>
    <li><hr></li>
    <li><h1>Funktionen</h1></li>
    <li><hr></li>
    <h2>Hier findest du eine Übersicht der Funktionen des Programms</h2>
  </ul>
</div>
<br>

请帮助我，我不知道如何解决该问题。提前致谢

[Image 1 Image 2

Answer 1

您可以使用bootstrap 4库，它将自动处理所有方案。

这里是链接getbootstrap.com