Prevent div overflow in Angular - html

Question

I have an issue with one of my Angular Pages.Below is the Landing Page of My App.
The issue that I am facing is whenever I am clicking Login button without entering any username/pwd, my div overflows as you can see in the image below:
What I've tried so far:
CSS Properties like:
overflow:hidden
max-width
min-width
resize:none
none of them seems to work. Below is the HTML for the same:
<div style=" background-color: rgba(227, 221, 233, 0.582);">
<div class="container-custom">
<div class="row">
<div class="col-md-7" >
<div class="card">
<div class="card-body" style="margin-bottom:1%">
<h3> What we do?</h3>
<hr>
<p style="text-align:justify">
Avaali is a consulting and professional services organization
focused<br>
on supporting upper mid to large enterprises to create and execute
their Digital roadmap.<br>
We are headquartered in Bengaluru, India. We believe that Digital is
going to be the biggest<br>
enabler of revenue to enterprises. We support our customers to
maximize value from digital<br>
and help them translate this value in the form of innovative
customer experience,<br>
highly engaging customers, internal process efficiencies, reduced
costs and delivering<br>
your organization’s stated objective Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad.
</p>
<hr>
<p>
Already registered?
Please login to the portal using your email address and password
<br>
</p>
</div>
</div>
</div>
<div class="col-md-5" style="position:relative">
<div class="card">
<div class="card-body">
<br>
<h4>Velocious Rapid - Sign In</h4>
<br>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group" style="margin-top:23px">
<input type="username" formControlName="username" id="username"
placeholder="Email Id" name="username"
class="form-control" [ngClass]="{ 'is-invalid': submitted &&
f.username.errors }" />
<div *ngIf="submitted && f.username.errors" class="invalid-
feedback">
<div *ngIf="f.username.errors.required">Username is
required</div>
</div>
</div>
<div class="form-group" style="margin-top: 35px">
<input type="password" formControlName="password" id="password"
placeholder="Password" name="password"
class="form-control" [ngClass]="{ 'is-invalid': submitted &&
f.password.errors }" />
<div *ngIf="submitted && f.password.errors" class="invalid-
feedback">
<div *ngIf="f.password.errors.required">Password is
required</div>
</div>
</div>
<button class="btn btn-primary" type="submit"
style="float:right;background-color: #0072aa">Login</button>
<div *ngIf="error" class="alert alert-danger"
style="width:70%">Username or Password is invalid</div>
</form>
<br>
<br>
<hr>
<p>New User ? Register Here</p>
<p> <a routerLink="/vendorOnboarding">Vendor Onboarding</a></p>
<p> Forgot Password?</p>
</div>
</div>
</div>
</div>
</div>
Request some expert advice. Thanks !

Answer 1

you need to set your error message position to absolute like below
.invalid-feedback {
position: absolute;
}