我正在运行一个训练示例，并且在语义标签完成并且第二个促销部分消失后遇到了一个问题。其中的标题在导航菜单上以一种完全傲慢的方式写着，甚至对按钮都不害羞，它写在按钮的正上方（这里通过片段是看不见的，我可能不知道如何在此处连接 Roboto 字体，所有颜色的屏幕截图都显示了问题）。为什么它不起作用？由引导程序使用
* {
font-family: "Roboto", sans-serif;
}
header {
position: relative;
height: 50px;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background-color: #212121;
z-index: 5;
}
.hamburger {
display: none;
}
.menu {
display: flex;
justify-content: space-between;
padding: 13px 70px;
margin: 0;
list-style-type: none;
}
.menu_link {
color: #ffffff;
font-size: 15px;
font-weight: 300;
}
.menu_link:hover {
text-decoration: none;
color: #1eacc7;
}
.menu_item {
border-right: 2px dotted black;
padding-right: 28px;
}
.menu_item:last-child {
border-right: none;
}
.subheader {
position: absolute;
top: 50px;
width: 100%;
height: 84px;
background-color: rgba(0, 0, 0, 0.6);
}
.subheader_logo {
display: block;
max-width: 100%;
margin-top: 16px;
}
.subheader_official {
margin-top: 6px;
opacity: 0.5;
color: #ffffff;
font-size: 13px;
font-weight: 400;
}
.subheader_call {
color: #ffffff;
font-size: 12px;
font-weight: 300;
margin-top: 19px;
text-align: right;
}
.subheader_phone {
display: block;
margin-top: 8px;
color: #ffffff;
font-size: 22px;
font-weight: 400;
text-transform: uppercase;
text-align: right;
line-height: 12px;
}
.subheader_btn {
margin-top: 19px;
width: 172px;
height: 46px;
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
border: none;
border-radius: 4px;
background-image: linear-gradient(to top, #1eacc7 0%, #4ce2ff 100%);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.21);
color: #ffffff;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
}
.subheader_btn:hover {
background-image: none;
background-color: #1eacc7;
}
.promo {
min-height: 800px;
background: url("https://cdn1.savepice.ru/uploads/2021/4/11/f418023a1c0e9994472190ff721cd355-full.jpg") center center/cover no-repeat;
}
.promo_header {
color: #ffffff;
font-weight: 700;
text-transform: uppercase;
font-size: 60px;
line-height: 60px;
margin: 0;
text-align: center;
}
.promo_subheader {
color: #ffffff;
font-weight: 700;
text-transform: uppercase;
font-size: 36px;
line-height: 36px;
margin: 0;
margin-top: 22px;
text-align: center;
}
.promo_descr {
color: #ffffff;
font-size: 18px;
font-weight: 400;
line-height: 24px;
text-align: center;
margin-top: 23px;
}
.promo_btn {
display: block;
margin: 118px auto 0 auto;
width: 259px;
height: 63px;
box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12);
border: none;
border-radius: 4px;
background-image: linear-gradient(to top, #1eacc7 0%, #4ce2ff 100%);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.21);
color: #ffffff;
font-size: 18px;
font-weight: 400;
text-transform: uppercase;
}
.promo_btn:hover {
background-image: none;
background-color: #1eacc7;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&subset=cyrillic-ext" rel="stylesheet">
<header>
<nav>
<div class="container">
<ul class="menu">
<li class="menu_item"><a href="#" class="menu_link">Главная</a></li>
<li class="menu_item"><a href="#" class="menu_link">Со своим автомобилем</a></li>
<li class="menu_item"><a href="#" class="menu_link">На автомобиле компании</a></li>
<li class="menu_item"><a href="#" class="menu_link">Требования</a></li>
<li class="menu_item"><a href="#" class="menu_link">Контакты</a></li>
<li class="menu_item"><a href="#" class="menu_link">Оставить заявку</a></li>
</ul>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
<div class="subheader">
<div class="container">
<div class="row">
<div class="col-6 col-md-4 offset-md-1">
<a href="#" class="subheader_logo"><img src="https://cdn1.savepice.ru/uploads/2021/4/11/4ef3cdfe37d551d4e75fb29eae407ad9-full.png" alt="logo"></a>
<div class="subheader_official">Официальный партнер Uber в Москве</div>
</div>
<div class="xs-hidden col-md-3 offset-md-1 col-xl-2 offset-xl-2">
<div class="subheader_call">Звоните нам ежедневно</div>
<a href="tel:84957970988" class="subheader_phone">8 495 797 09 88</a>
</div>
<div class="col-6 col-md-3 col-lg-2">
<a href="tel:84957970988" class="xs-visible subheader_phone">8 495 797 09 88</a>
<button class="subheader_btn">заказать звонок</button>
</div>
</div>
</div>
</div>
</header>
<section class="promo">
<div class="container">
<div class="row">
<div class="col-md-12 offset-md-0 col-lg-10 offset-lg-1">
<h1 class="promo_header">КОМПАНИЯ UBER PARTNERS!</h1>
<h2 class="promo_subheader">ПРИГЛАШАЕМ ВОДИТЕЛЕЙ! НА СВОЕМ АВТО!</h2>
<div class="promo_descr">
Компания UBER динамически развивающаяся. Компания на рынке занимает лидирующее место среди
таксомоторных компаний, Компания абсолютно прозрачная вы можете контролировать все процессы у
себя в личном кабинете. Бонуcная система.Помимо выполненной работы по заказам, компания
начисляет бонусы за
пиковое время.
<br><br>
Мы одни из партнеров и зарекомендовали себя как одна из лучших команд в городе Москве. Водители
у нас
зарабатывают от 80000- 120000 в месяц.
</div>
<button class="promo_btn">ОТПРАВИТЬ ЗАЯВКУ!</button>
</div>
</div>
</div>
</section>
这是因为您为整个标题设置了 50 像素的固定高度。
'+ 使副标题不是标题的一部分，而是在您的促销块中更合乎逻辑。压到顶部并添加填充。