I'm currently attempting to center certain elements to ensure they are visually aligned.
The upper div seems to have some odd space on the right, causing all the content within that div to be shifted and not accurately centered. On the other hand, the lower div (which contains colored circles) is perfectly centered.
https://i.sstatic.net/ZXnqN.png
Interestingly:
It's neither padding nor margin causing this issue.
Upon inspecting with Chrome tools, I noticed a purple-lined area indicating that the content within the top div doesn't occupy all available space:
https://i.sstatic.net/zZ0Rh.jpg
Despite trying various styles in the inspector, I'm unable to remove that purple area.
Is there a way to ensure the content in the div uses all the available space?
As a temporary solution, I could add 15px of margin to the circles, but the alignment may still be off on mobile devices, so I'm looking for a proper fix.
What is the source of that purple-lined area?
Here is the HTML code:
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afcdc0c0dbdcdbddcedfef9a819d819c">[email protected]</a>/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>