我正在try 将一些元素居中，以便它们在视觉上对齐.
最上面的div在右边有一些奇怪的空间，它使div中的所有内容都被推到一边，而不是真正居中.底部的div(彩色圆圈)真正居中对齐.
Interestingly:
It's not padding, and it's not margin.
使用Chrome Inspect工具，我可以看到有一些紫色的线条区域，这显然意味着顶部div中的内容没有占据所有可用空间:
在判断器中选中和取消选中样式后，我似乎无法让那个紫色区域消失.
如何才能使div中的内容占据所有可用空间？
作为一个黑客，我可以暂时给圈子增加15px的边距，但在移动设备上看起来仍然有些不对劲，所以我在寻找真正的答案.
那些紫色的线条是从哪里来的？
以下是该网页的内容:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<nav class="container navbar navbar-expand-sm navbar-light mt-3" style="padding:15px;background-color:blue;">
<div class="row w-100 align-items-center">
<div class="col-6 col-sm order-1 order-sm-1">
<h1 class="me-auto">
<a href="/" class="text-body" style="text-decoration: none;">Some Title</a>
</h1>
</div>
<div class="col-12 col-sm order-3 order-sm-2 text-center mt-3 mt-sm-0 " style="background-color: green;">
<form class="w-100 mx-auto" action="/askgpt" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="blah" autocomplete="off">
<input autocomplete="off" type="hidden" name="blah" id="blah">
<input type="text" name="prompt" id="prompt" value="" class="form-control form-control-lg mb-2 w-100" placeholder="move the start of this session 10m forward">
</form>
</div>
<div class="col-6 col-sm order-2 order-sm-3 text-end">
<div class="nav-item dropdown ms-0" style="max-height: 40px;">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons" style="font-size: 35px;">menu</i> </a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink" style="font-size:30px;">
<a class="dropdown-item" href="/home">Week view</a>
<a class="dropdown-item" href="/leaderboard">Leaderboard</a>
<a class="dropdown-item" href="/purchase">Buy now</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/entries">Edit times</a>
<a class="dropdown-item" id="lightdark">Dark ☽</a>
</div>
</div>
</div>
</div>
</nav>