如何将Home标题正确显示在Navbar（导航栏）内部？

我编写了以下CSS和HTML代码，尝试将<h2>Home</h2>放入class为navbar的div中，但Home标题无法正确显示在导航栏内。

原代码 #

CSS代码 #

.navbar {
    background-color: #EB0E58;
    width: 1660px;
    height: 10px;
    border: 5px solid blue;
    padding: 10px;
    position: fixed;
    left: 0;
    top: 0;
}

HTML代码 #

<div class="navbar"> <h2>Home</h2></div> 

问题原因 #

导航栏设置了固定高度height:10px，而<h2>标签自带默认字体大小与行高，实际高度远大于10px，导致标题被导航栏高度截断，无法完整显示。同时固定宽度width:1660px在不同屏幕尺寸下会出现适配问题。

解决方法 #

• 移除固定height属性，让导航栏根据内部内容自动撑开高度；或设置足够容纳<h2>的高度（比如height:60px）
• 将width:1660px改为width:100%，实现导航栏自适应屏幕宽度
• 添加box-sizing:border-box，避免内边距和边框额外增加元素总宽度
• 可选：给<h2>设置margin:0，清除默认外边距，优化布局紧凑度

修改后的代码 #

CSS代码 #

.navbar {
    background-color: #EB0E58;
    width: 100%;
    /* 移除固定height，或设置合适高度：height:60px; */
    border: 5px solid blue;
    padding: 10px;
    position: fixed;
    left: 0;
    top: 0;
    box-sizing: border-box;
}

.navbar h2 {
    margin: 0; /* 清除h2默认外边距 */
}

HTML代码 #

<div class="navbar"> <h2>Home</h2></div> 

内容的提问来源于stack exchange，提问作者Xianzun