Html H1标签没有响应

我设置了H1标签，但它没有响应。我有下面的代码，我认为应该工作，但显然不是

<div class="middle">
        <h1>Cheryl Cox Counselling</h1></div>



body {
font-size: 100%;
}


.middle {
display: flex;
width: 55%;
justify-content: center;
}




h1 {
font-family: 'Great Vibes', cursive;
font-size: 7em;
padding-top: .5em;
color: grey;
text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.3), 1px 1px 0px 
rgba(0, 0, 0, 0.8);
}

---

以下内容应是响应性的。你使用了很大的字体，因此它没有破坏这个词。下面的代码将打断单词，但为了使字体大小响应，您必须在断点处使用媒体查询

---

你期望得到什么？那是什么样的帮助？

<div class="middle">
  <h1>Cheryl Cox Counselling</h1>
</div>


body {
font-size: 100%;
}


.middle{
  width:100%;
  position:relative;
}

h1 {
font-family: 'Great Vibes', cursive;
font-size: 5em;
white-space:normal;
word-break: break-all;
color: grey;
text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.3), 1px 1px 0px 
rgba(0, 0, 0, 0.8);
text-align:center;
width:100%;
}