删除h1旁边的空间

Question

我已经创建了这个html＆css代码，现在由于某种原因我被卡住了。它不会让我删除h1旁边的空间。我已经尝试了很多，但似乎无济于事。哎呀

 
.h1-banner {
 font-size: 60px;
 border: 2px solid #2B75A3;
 background-color: #2B75A3;
}
.jumbotron {
 background-image: url(images/banner.jpg);
 background-size: cover;
 height: 50vh;
 color: white;
 text-align: center;
 margin-bottom:0;
 border-bottom: 5px solid #3BB1E5;
}

 <div class="jumbotron jumbotron-fluid">
 <div class="container">
  <h1 class="h1-banner">Title</h1>
 </div>
</div>

示例：

Answer 1

每个定义

<h1>是一个块级元素。因此，它涵盖了给定的整个（水平）空间。

您只需将其更改为display: inline-block;。然后，仅根据其内容扩展所需的大小。某些填充的少量添加也可能有用：

.h1-banner {
 font-size: 60px;
 border: 2px solid #2B75A3;
 background-color: #2B75A3;
 display: inline-block;
 padding: 0.1em 1em;
}
.jumbotron {
 background-image: url(images/banner.jpg);
 background-size: cover;
 height: 50vh;
 color: white;
 text-align: center;
 margin-bottom:0;
 border-bottom: 5px solid #3BB1E5;
}

<div class="jumbotron jumbotron-fluid">
     <div class="container">
      <h1 class="h1-banner">Title</h1>
     </div>
    </div>