Javascript HTML5和CSS3搞砸了

我正在尝试使用Django创建一个博客网站。当我在做前端工作时，我遇到了这个问题。代码如下所示：， 这篇文章链接的图片显示了它的问题，标题占用了太多的可用空间。同时，我用几乎完全相同的代码（HTML和CSS）文件创建了一个类似的页面

正文{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：15px；
线高：1.5；
保证金：0；
填充：0；
颜色：#efefef；
背景色：#0e0e；
}
/*全球的*/
.集装箱{
宽度：80%；
保证金：自动；
溢出：隐藏；
}
.亮点{
颜色：#f64003；
字体大小：粗体；
}
/*标题*/
标题{
背景色：#1F1E；
颜色：#ffffff；
边框底部：3px#f64003实心；
最高高度：20%；
}
标题ul{
列表样式类型：无；
}
标题ulli a{
字体大小：粗体；
字体风格：普通；
文本转换：大写；
字体大小：16px；
文字装饰：无；
颜色：#ffffff；
}
标题.logoTextArea{
身高：50%；
填充：0；
}
标题.logoTextArea h1{
字体大小：50px；
文本对齐：居中；
}
标题。导航。左侧{
浮动：左；
文本对齐：左对齐；
填充：0 20px 0 20px；
}
标题。导航。左ul li{
显示：内联；
利润率：10px；
}
标题.导航a:悬停{
字体大小：粗体；
颜色：#f64003；
}
标题。导航。对{
浮动：对；
文本对齐：右对齐；
填充：0 20px 0 20px；
}
标题。导航。右ul li{
显示：内联；
利润率：10px；
}
/*展示区*/
.展示{
最小高度：500px；
背景：url（'./images/mainBG.jpeg'）不重复-150px 0；
边框底部：2px#f64003实心；
}
.展示h1{
字体大小：75px；
}

---

在CSS中，标题设置为屏幕的50%：

删除或减少高度值以解决问题。
尝试此操作。要更改的内容很多：）在整个页面中查看


正文{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：15px；
线高：1.5；
保证金：0；
填充：0；
颜色：#efefef；
背景色：#0e0e；
}
/*全球的*/
.集装箱{
宽度：80%；
保证金：自动；
溢出：隐藏；
}
.亮点{
颜色：#f64003；
字体大小：粗体；
}
/*标题*/
标题{
背景色：#1F1E；
颜色：#ffffff；
边框底部：3px#f64003实心；
最大高度：10%；
宽度：100%；
}
标题ul{
列表样式类型：无；
}
标题ulli a{
字体大小：粗体；
字体风格：普通；
文本转换：大写；
字体大小：16px；
文字装饰：无；
颜色：#ffffff；
}
标题.logoTextArea{
身高：1%；
宽度：1%；
填充：0；
浮动：左；
}
标题.logoTextArea h1{
字体大小：10px；
文本对齐：居中；
}
标题。导航。左侧{
浮动：左；
文本对齐：左对齐；
填充：0 20px 0 20px；
}
标题。导航。左ul li{
显示：内联；
利润率：10px；
}
标题.导航a:悬停{
字体大小：粗体；
颜色：#f64003；
}
标题。导航。对{
浮动：对；
文本对齐：右对齐；
/*填充：0 20px 0 20px*/
}
标题。导航。右ul li{
显示：内联；
左边距：10px；
/*利润率：10px*/
}
/*展示区*/
.展示{
最小高度：500px；
背景：url（'./images/mainBG.jpeg'）不重复-150px 0；
边框底部：2px#f64003实心；
}
.展示h1{
字体大小：75px；
}
与屏幕截图相比，粘贴的代码呈现的效果不同。请务必提供准确的代码片段。非常感谢！没问题！如果你能接受我的回答，那就太好了，谢谢你！：）
header .logoTextArea {
    height: 50%;
    padding: 0;
}