When observing this layout, there seems to be a vertical misalignment. The button slightly overflows, while the input field does not.
https://i.sstatic.net/pEw2U.png
What could be causing this issue? I am currently utilizing Bootstrap 5.2.3 and have included the code snippet for reference.
Apologies if the problem (and its solution) are apparent; frontend development is new to me, and I am experimenting with Bootstrap for practice.
<div class="d-flex flex-column justify-content-center align-items-center" style="min-height: 100vh;">
<h2>Login</h2>
<div class="w-25 shadow p-4 m-4">
<div class="row">
<div class="col">
<div class="form-floating mb-3">
<input type="email" name="email" id="email" class="form-control" autocomplete="off"
placeholder="E-mail">
<label for="email">E-mail</label>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-floating mb-3">
<input type="password" name="password" id="password" class="form-control"
placeholder="Password">
<label for="password">Password</label>
</div>
</div>
</div>
<div class="row gap-2">
<input type="submit" value="asd" class="btn btn-primary col">
<input type="submit" value="asd" class="btn btn-primary col">
</div>
</div>
</div>