new to bootstrap!我试图对齐导航栏和顶部的标题。黄色区域比导航条宽。我还需要帮助设置背景图像，以跨越整个网站。如果有人能给我一些建议，我将不胜感激!
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<!doctype html>
<div class="container bg-warning">
<div class="row">
<div class="d-flex justify-content-center">
<p class="display-1">Thuan's Website</p>
</div>
</div>
</div>
<div class="container">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a href="#" class="navbar-brand" />
<img src="https://img.icons8.com/ios-glyphs/30/000000/redo.png" />Thuan
</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#" class="nav-link">Home
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Forums
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Games
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact
</a>
</li>
</ul>
</div>
</nav>
</div>为了获得标题和导航条的全宽度只需将其放在容器class
之外
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex justify-content-center bg-warning">
<p class="display-1">Thuan's Website</p>
</div>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a href="#" class="navbar-brand" />
<img src="https://img.icons8.com/ios-glyphs/30/000000/redo.png" />Thuan
</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#" class="nav-link">Home
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Forums
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Games
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact
</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
</div>
</div>