使标题内的文本响应

Question

以下标题在全角时看起来不错；但是一旦我开始缩小规模； ipsom lorem文本的左侧有一个很大的间隙，当它缩小时，它应该填充屏幕的整个宽度。 （第一张图片是全角图片；第二张图片是缩小尺寸后应该显示的图片）。

到目前为止是我的代码：

.header {
    background-color: #090c1a;
}

.header-inner {
  color: white;
  display: grid;
  max-width: 1180px;
  margin: 180px auto;
  grid-template-columns: 1fr minmax(50%, auto);
}

为了方便起见，我还创建了一个Codepen。 https://codepen.io/tiotolstoy/pen/PoPzoQw

Answer 1

我认为网格不是您所描述的最佳方法。我可以在标头内部的嵌套div上使用“最大宽度：590像素”来实现。就像这里-https://codepen.io/urich/pen/rNOLNZd

.header-inner {
  color: white;
  max-width: 1180px;
  margin: 180px auto;
}

.header-inner >div {
  max-width: 590px;
}