https://i.sstatic.net/3OTLd.pngWhile working on my Spring Boot Web App, I encountered a slight alignment issue on the login page. The problem, as shown in the attached image, is that the div is not perfectly centered on the page. I am utilizing Bootstrap for my project.
Although the element is almost centered, it seems to be slightly off to the left without a clear reason. I have included my HTML and relevant CSS below for reference. It appears that there might be some conflicting styles causing the misalignment, but pinpointing the exact issue is proving to be a challenge. https://i.sstatic.net/ccOZP.png
<div id="parentLogin">
<div class="row" style="width: 40%;">
<div class="col-md-12 col-md-offset-2">
<div>
<c:if test="${param.error != null}">
<div class="login-error" style="margin: 0 auto;">Incorrect username or password</div>
</c:if>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" style="font-weight: bold; font-size: x-large; margin: 1%;">User Login</div>
</div>
<div class="panel-body">
<form method="post" action="${loginUrl}" class="login-form">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
<div class="input-group">
<input type="text" name="username" placeholder="Username"
class="form-control" />
</div>
<div class="input-group">
<input type="password" name="password" placeholder="Password"
class="form-control" />
</div>
<button type="submit" class="suit_and_tie">Sign In</button>
</form>
</div>
</div>
</div>
</div>
</div>
#parentLogin {
display: flex;
justify-content: center;
align-items: center;
height: 75vh;
}